Canvas.toDataURL 在移动 Safari iOS 上不起作用？答案

【问题标题】：Canvas.toDataURL not working on mobile Safari iOS?Canvas.toDataURL 在移动 Safari iOS 上不起作用？
【发布时间】：2014-07-10 04:57:50
【问题描述】：

我尝试了以下方法。我从 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 上运行。

是否有解决此问题的方法？

【问题讨论】：

另见stackoverflow.com/questions/18972038/…和stackoverflow.com/questions/15495221/…
确定：您的 JSFiddle 在 Chrome 或 Firefox 上是否适合您？我无法测试，因为我的公司阻止了对 DropBox 的请求。此外，您确定您没有遇到跨域安全问题，将远程 SVG 绘制到您的画布会污染它吗？
@Phrogz 是的，它适用于桌面 Chrome 和 FF。任何其他想法如何解决它。
如果我有想法我早就发布了。
我也面临同样的问题。我的代码在桌面上完美运行，但相同的代码不适用于 iPad Safari。如何解决问题

标签： javascript ios html canvas

【解决方案1】：

这可能是也可能不是同一个问题，但我从 iOS 上的这个调用中得到了“数据：”（在其他地方工作），并通过显着减小画布的大小设法解决了这个问题。我认为加载图像或返回字符串时内存不足，并以特别无用的方式处理它。

【讨论】：

我们画布的最大尺寸是 2000 像素，但是当我们将其降低到 1500 时，它就可以工作了。我们在
很高兴看到 Safari 解决了这个问题。在 iOS 8.3 的移动 Safari 中找到。后来的版本似乎没有这个内存问题。

【解决方案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);
}

希望这会有所帮助。

【讨论】：