Question

我尝试了以下内容。我从svg图像创建了<img>。然后我在画布上绘制它，最后我将其导出为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

这可能是也可能不是同一个问题，但我得到了＆＃34;数据：，＆＃34;从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);
}

希望这有帮助。

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

2 个答案: