Canvas.toDataURL无法在移动Safari iOS上运行？

Question

我尝试了以下内容.我<img>从一个svg图像创建了一个.然后我在画布上绘制它,最后我将其导出为PNG并将生成的PNG设置为新的<img>.它适用于Android,Chrome,Safari,FireFox.但是,canvas.toDataUrl()不适用于iOS上的移动Safari.它仅在您不在画布上使用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上的这个调用(在其他地方工作)得到了"数据:",并设法通过大幅减少画布的大小来解决问题.我认为加载图像或返回字符串并以特别无用的方式处理它时内存不足.

Answer 2

我认为您的浏览器可能不支持它。请参阅以下内容。

http://caniuse.com/#search=canvas

iPhone 3GS        - Mobile Safari 4.0.5
iPhone 4          - Mobile Safari 4.0.5
iPhone 4s         - Mobile Safari 5.1
iPad 1 / 3.2.2    - Mobile Safari 4.0.4
iPad 2 / 4.3.3    - Mobile Safari 5.02
iPad 2 / 5.0      - Mobile Safari 5.1
iPad 3 / 5.1      - Mobile Safari 5.1
iPhone 5 / 6.0    - Mobile Safari 6.0
iPad 4 / 6.0      - Mobile Safari 6.0

您还可以使用以下代码测试您的浏览器支持：

function supportsToDataURL()
{
    var c = document.createElement("canvas");
    var data = c.toDataURL("image/png");
    return (data.indexOf("data:image/png") == 0);
}

希望这可以帮助。