1

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!

sulagna
  • 11
  • 3
  • Perhaps relevant to : [SECURITY_ERR: DOM Exception 18 when invoking toDataURL method of the Canvas](http://stackoverflow.com/questions/21829799/security-err-dom-exception-18-when-invoking-todataurl-method-of-the-canvas) and/or [Why does canvas.toDataURL() throw a security exception?](http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception) – Manu Aug 24 '15 at 06:31
  • I wouldn't recommend optimizing websites to work with IE at all, that's maybe not worth it (I've been told that for long, too). If you insist, you will have to face problems where you simply can't use brand new technologies. It always seems to get frustrating once you consider IE. :-( – Peter Nerlich Aug 24 '15 at 06:53
  • @PeterNerlich - having struggled with this issue for quite sometime.. thats what i am beginning to wonder - is it worth it? can i safely ignore IE? – sulagna Aug 24 '15 at 10:21
  • @sulagna Depends on your target group. If your target group are all people usually online in general, you surely can ignore it. But if your target group is like the teachers at my high school (and you don't want high schlool but acceptable or better quality ;-) ) most of your audience will use IE. And the only reason for that is, because it's the standard on the computers there and they normally get confused when they are asked about their browser choice and... Ok, I'll stop here. I think you got the point. ;-) – Peter Nerlich Aug 25 '15 at 16:05
  • @PeterNerlich yes i do! Thank you! – sulagna Sep 24 '15 at 10:23
  • got same issue here, anyone solved this? – JavaScripter Dec 13 '15 at 22:23

0 Answers0