我尝试了以下方法。我创建了一个 <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 上运行。
这个问题有解决方法吗?
最佳答案
这可能是也可能不是同一个问题,但我从 iOS 上的这次调用(在其他任何地方都有效)得到了“数据:”,并通过显着减小 Canvas 的大小设法解决了这个问题。我认为它在加载图像或返回字符串时内存不足,并以一种特别无用的方式处理它。
关于javascript - Canvas.toDataURL 不适用于移动 Safari iOS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23785071/