Canvas.toDataURL不适用于移动Safari iOS？

我尝试了以下。 我从一个SVG图像创build一个<img> 。 然后我画在canvas上，最后导出为PNG，并将生成的PNG设置为新的<img> 。 它适用于Android，Chrome，Safari，FireFox。 但是， canvas.toDataUrl()不适用于iOS上的移动Safari。 它只在你不使用canvas上的SVG图像时才起作用。

这里是我用来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"; 

我在这里创build了一个JSFiddle： http : //jsfiddle.net/confile/ZqJYG/

只有在iOS上运行时才会出现此问题。 它不在移动版Safari上运行，也不在移动版Chrome上运行。

有没有解决这个问题的方法？

Answer 1

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

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 

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

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

希望这可以帮助。

Answer 2

这可能是也可能不是同一个问题，但我从iOS调用（在其他地方工作）获得“data：”，并通过显着减小canvas的大小来解决问题。 我认为这是加载图像或返回string，并以特别无用的方式处理它的内存不足。