I have been trying to take a "screenshot" of a map I am working on and was finally able to do it by using a combination of html2canvas and the answer from this previous SO post.
However, when drawing polygons or polylines on the map (either using drawing manager or google.maps.polygon) the canvas suddenly becomes tainted and can't be exported using toDataURL(). The following error is produced following a successful canvas render (http removed due to 2 link max allowance):
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Object.onrendered (://127.0.0.1/code/WorkingCode.html:188:31) at Object.options.complete (://127.0.0.1/code/html2canvas.js:2711:15) at start (://127.0.0.1/code/html2canvas.js:2215:17) at HTMLImageElement.img.onload (://127.0.0.1/code/html2canvas.js:2352:7)
I have researched this problem for and there is no clear answer why this happens! I know the "screenshot" with polygons should work because the map in the aforementioned link (also seen here on the web) is able to do it.
The difference between our two codes is not clear as to why one would work while the other would not, as I am using the same code.
So I guess I have two questions A) What about the polygons taints the canvas (i.e. is there a file that i should look for a CORS header? B) Why does the same code work in one instance and fail in another.
Some background on my code: 1) I am running everything locally through Xampp server (apache) on windows. 2) The map is generated through google maps api as are the polygons. 3) The html2canvas.js is located in the working folder that my webpage is in.
I am attaching some relevant bits of code so that it is hopefully more clear what I am doing.
sources:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&libraries=geometry,drawing,places&callback=initAutoComplete"
async defer></script>
<script type="text/javascript" src="http://127.0.0.1/LawnCareMapping/html2canvas.js"
></script>
Screenshot
<button onclick="Calc()"></button>
function Calc(){
//New Method from StackExchange solution
//get transform value
var transform=$('.gm-style>div:first>div').css('transform')
var comp=transform.split(',') //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5]) //get top value
$('.gm-style>div:first>div').css({ //get the map container. not sure if stable
'transform':'none',
'left':mapleft,
'top':maptop,
});
html2canvas($('#map'),
{
//proxy: "http://127.0.0.1/html2canvasproxy.php",
useCORS: true,
logging: true,
onrendered: function(canvas)
{
var dataUrl= canvas.toDataURL();
window.open (dataUrl);
$('.gm-style>div:first>div').css({
left:0,
top:0,
'transform':transform
})
}
});
};
Map and polygons
var location = new google.maps.LatLng(42.886273, -74.870589);
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 8,
mapTypeId: 'hybrid',
draggableCursor:"crosshair",
});
Shape && Shape.setMap(null)
Shape = new google.maps.Polygon({
paths: Points,
strokeColor:"#fff",
strokeOpacity: .5,
strokeWeight: 2,
fillColor: "#fff",
fillOpacity: .5,
editable: !0,
clickable: false
});
plowShape[plowCoordInd].setMap(map);
EDIT:
I have removed my website link.
