Onload（）处理程序在IE中没有响应

我正在创建画布并使用drawImage（）绘制内联svg。一切工作正常，但我卡住，因为下面的问题...Onload（）处理程序在IE中没有响应

我的问题是，处理程序处理程序没有在IE中响应？ Rhis在FF和chhrome工作。我如何解决它在IE 9中向上工作？

img2.onload = function() { 
    console.log("load"); 
}

jsFiddle

function createme() { 
     var test = $('<canvas />', { id : 'mycanvs' }) 
     $('#album').append(test); 

     var svg2 = document.getElementById('sSource').innerHTML, 
      vms = test[0], //canvas 
      ctx2 = vms.getContext('2d'); 

     svgToImage(svg2); 

     function svgToImage(svg2) { 
     var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2), 
      img2 = new Image; 
      alert("just before onload") 
      img2.onload = function() { 
       console.log("load"); // does not show 
      } 
      img2.src = nurl; 
     } 
}

来源

2015-04-03 Becky

为了澄清，修复'charset = utf-8'让你从SVG创建图像的一部分。但是......尽管你可以**将SVG绘制到画布上，但在IE中，由于IE的安全限制，您无法**将画布内容导出到具有'canvas.toDataURL'的图像。 Chrome和FF没有这种安全限制，您可以从这些浏览器获取SVG内容的dataURL（并因此创建图像）。 – markE 2015-04-04 06:27:44

@markE：感谢您的输入。如果我需要能够将画布内容导出到IE中的图像，那么解决方案是什么？ – Becky 2015-04-04 07:43:46

我不认为IE有直接的解决方案，因为当svg被绘制时，画布会立即受到污染。接下来的最佳解决方案是将svg发送回服务器并将其转换为.png（这不会污染画布）。 – markE 2015-04-04 15:49:47

我没有一个IE虚拟机上运行的时刻，但根据their docs处理程序具有对象本身之前定义：

要确保事件处理程序接收这些对象的onload事件，将定义事件处理程序的脚本对象放置在之前对象并使用对象中的onload属性来设置处理程序。

我不明白为什么你的代码将不能在IE浏览，但稍微让你的处理程序之前你这个定义拨弄调整创建图像对象......这给一试：

function createme() { 
     var test = $('<canvas />', { id : 'mycanvs' }); 
     var onloadHandler = function() { 
      console.log("load"); 
     }; 
     $('#album').append(test); 

     var svg2 = document.getElementById('sSource').innerHTML, 
      vms = test[0], //canvas 
      ctx2 = vms.getContext('2d'); 

     function svgToImage(svg2) { 
     var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2), 
      img2 = new Image; 

      img2.onload = onloadHandler 

      img2.src = nurl; 
     } 
     svgToImage(svg2); 
} 
createme();

https://jsfiddle.net/z769z7af/10/

来源

2015-04-03 20:21:45 pherris

谢谢。 :)但仍然无法在IE中使用。如果你在IE中运行它，你会看到你的自我。 – Becky 2015-04-03 20:31:28

hm ...我没有虚拟机在这台机器上，但我可以稍后看...现在我正在查看代码，我不知道是否缺少'（）''后'新图像可能造成问题？ – pherris 2015-04-03 20:36:33

错误是由于缺少关键字charset=utf-8。

var nurl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2),

来源

2015-04-03 21:23:26 Becky

Onload（）处理程序在IE中没有响应

回答

相关问题