Question

我正在创建一个画布并使用drawImage（）来绘制内联svg。一切正常，但我因为下面的问题而陷入困境......

我的问题是onload处理程序在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;
      }
}

Answer 1

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

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

Answer 2

我目前没有运行IE VM，但根据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/

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

2 个答案: