Canvas.toDataURL不能在移动Safari上使用iOS？

问题描述：

我试过以下。我从svg图像创建了一个< img> 。然后我在画布上绘制它，最后我导出为PNG，并将结果PNG设置为新的< img> 。它适用于Android，Chrome，Safari，FireFox。但是， canvas.toDataUrl（）在iOS上的移动Safari上不工作。它只有在你不在画布上使用SVG图像时才能工作。

I tried the following. I created an <img> from an svg image. Then I draw it on a canvas and finally I exported it as PNG and set the resulting PNG as a new <img>. It works well on Android, Chrome, Safari, FireFox. But, canvas.toDataUrl() is not working on mobile Safari on iOS. It is only working when you don't use SVG images on the canvas.

这里是我用于测试的代码：

Here is the code I use for testing:

<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/

I created a JSFiddle here: http://jsfiddle.net/confile/ZqJYG/

问题仅发生在您在iOS上运行时。

The problem occurs only when you run it on iOS. It does not run on mobile Safari and not on mobile Chrome.

此问题是否有解决方法？

答

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

I think your browser may not support it . see the following.

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

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

You can also test your browser support by using the following code:

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

希望这有帮助。

Canvas.toDataURL不能在移动Safari上使用iOS？

相关推荐