问题
I am facing this issue only with IE (IE 9 is what i am using.). Its working fine with firefox,chrome,safari.
I need to capture the google map image on the click of a button.
$(document).ready(function () {
var saveMapToDataUrl = function(){
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_canvas'), {
useCORS: true,
logging: true,
allowTaint:false,
onrendered: function(canvas)
{
$('body').append(canvas);
$('#image').html("");
$('#image').html(canvas);
$("#image canvas").attr("id","mcanvas");
var dataUrl= canvas.toDataURL("image/jpeg");
$("#img_val").val(dataUrl);
$("#myForm").submit();
$('.gm-style>div:first>div').css({
left:0,
top:0,
'transform':transform
})
}
});
}
$("#capture").click(function(){saveMapToDataUrl()});
});
In the browser log i see the following -
LOG: 1509mshtml2canvas:Unable to copy canvas content from[object HTMLCanvasElement]DOM Exception: SECURITY_ERR (18)
LOG: 1603mshtml2canvas:Document cloned
LOG: 1727mshtml2canvas:Initialized CanvasRenderer with size1440x838
LOG: 1727mshtml2canvas:Starting NodeParser
LOG: 1833mshtml2canvas:Fetched nodes, total:142
LOG: 1833mshtml2canvas:Calculate overflow clips
LOG: 1944mshtml2canvas:Start fetching images
LOG: 1947mshtml2canvas:DummyImageContainer forhttp://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i1096&2i673&2e1&3u3&4m2&1u750&2u500&5m5&1e0&5sen-US&6sus&10b1&12b1&token=130826
LOG: 1947mshtml2canvas:Initiating DummyImageContainer
LOG: 1948mshtml2canvas:Added image #1http://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i1096&2i673&2e1&3u3&4m2&1u7
LOG: 1949mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1949mshtml2canvas:Added image #2http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1949mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1949mshtml2canvas:Added image #2http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1949mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1949mshtml2canvas:Added image #3http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1949mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i2!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1949mshtml2canvas:Added image #4http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i2!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1950mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i4!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1950mshtml2canvas:Added image #5http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i5!3i4!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!1
LOG: 1950mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i2!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1950mshtml2canvas:Added image #6http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i2!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!1
LOG: 1950mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i4!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1950mshtml2canvas:Added image #7http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i6!3i4!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1951mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i3!2m3!1e0!2sm!3i317280249!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1951mshtml2canvas:Added image #8http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i3!2m3!1e0!2sm!3i317280249!3m9!2sen-US!3sUS!5e18!1
LOG: 1951mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1951mshtml2canvas:Added image #9http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i3!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1951mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i2!2m3!1e0!2sm!3i317280249!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1951mshtml2canvas:Added image #10http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i2!2m3!1e0!2sm!3i317280249!3m9!2sen-US!3sUS!5e18!1
LOG: 1952mshtml2canvas:DummyImageContainer forhttp://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i4!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1952mshtml2canvas:Added image #11http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i3!2i4!3i4!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!1
LOG: 1952mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i2!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1952mshtml2canvas:Added image #12http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i2!2m3!1e0!2sm!3i317275208!3m9!2sen-US!3sUS!5e18!1
LOG: 1952mshtml2canvas:DummyImageContainer forhttp://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i4!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0
LOG: 1952mshtml2canvas:Added image #13http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i3!2i7!3i4!2m3!1e0!2sm!3i317275929!3m9!2sen-US!3sUS!5e18!1
LOG: 1953mshtml2canvas:DummyImageContainer forhttp://maps.gstatic.com/mapfiles/api-3/images/google_white2.png
LOG: 1953mshtml2canvas:Added image #14http://maps.gstatic.com/mapfiles/api-3/images/google_white2.png
LOG: 1953mshtml2canvas:DummyImageContainer forhttp://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png
LOG: 1953mshtml2canvas:Added image #15http://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png
LOG: 1953mshtml2canvas:DummyImageContainer forhttp://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png
LOG: 1953mshtml2canvas:Added image #16http://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png
LOG: 1966mshtml2canvas:Finished searching images
LOG: 2065mshtml2canvas:Succesfully loaded image #1[object Object]
LOG: 2066mshtml2canvas:Succesfully loaded image #2[object Object]
LOG: 2066mshtml2canvas:Succesfully loaded image #3[object Object]
LOG: 2066mshtml2canvas:Succesfully loaded image #4[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #5[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #6[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #7[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #8[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #9[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #10[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #11[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #12[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #13[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #14[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #15[object Object]
LOG: 2067mshtml2canvas:Succesfully loaded image #16[object Object]
LOG: 2068mshtml2canvas:Images loaded, starting parsing
LOG: 2068mshtml2canvas:Creating stacking contexts
LOG: 2087mshtml2canvas:Sorting stacking contexts
LOG: 2093mshtml2canvas:Render queue created with 279 items
LOG: 3651mshtml2canvas:Finished rendering
LOG: 3651mshtml2canvas:Cropping canvas at:left:15top:199width:930height:500
LOG: 3651mshtml2canvas:Resulting crop with width930and height500 with x15and y199
LOG: 3655mshtml2canvas:Cleaned up container
LOG: 3655mshtml2canvas:options.onrendered is deprecated, html2canvas returns a Promise containing the canvas
I am very new to this area so will be really great if someone can help! Please let me know if any other part of code is required. Thanks in advance!
来源：https://stackoverflow.com/questions/32175248/html2canvas-not-working-with-ie-google-map-getting-rendered-as-a-blank-image