javascript - Canvas.toDataURL 不适用于移动 Safari iOS？

Question

我尝试了以下方法。我创建了一个 <img>来自 svg 图像。然后我在 Canvas 上绘制它，最后我将它导出为 PNG 并将生成的 PNG 设置为新的 <img>。 .它适用于 Android、Chrome、Safari、FireFox。但是，canvas.toDataUrl()不适用于 iOS 上的移动 Safari。它仅在您不在 Canvas 上使用 SVG 图像时有效。

这是我用来测试的代码:

<div id="mydiv"></div>
<img id="image2">

var mydiv  = document.getElementById('mydiv'),
    image2 = document.getElementById('image2');

image2.crossOrigin="anonymous";

var image3 = new Image();
mydiv.appendChild(image3);
image3.onload = function() {
  var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');

  canvas.width = image3.width;
  canvas.height = image3.height;

  ctx.drawImage(image3,0,0, canvas.width, canvas.height);
  var dataUrl = canvas.toDataURL('image/png');
  image2.src = dataUrl;
}
image3.crossOrigin="anonymous";
image3.src = "https://dl.dropboxusercontent.com/u/47067729/sticker4.svg";

我在这里创建了一个 JSFiddle:http://jsfiddle.net/confile/ZqJYG/

只有在 iOS 上运行时才会出现此问题。它不在移动 Safari 上运行，也不在移动 Chrome 上运行。

这个问题有解决方法吗？

Answer 1

这可能是也可能不是同一个问题，但我从 iOS 上的这次调用(在其他任何地方都有效)得到了“数据:”，并通过显着减小 Canvas 的大小设法解决了这个问题。我认为它在加载图像或返回字符串时内存不足，并以一种特别无用的方式处理它。