为什么 toDataURL 在移动端无法获取 Canvas 内容？答案

【问题标题】：Why toDataURL Does Not Get Canvas Content on Mobile?为什么 toDataURL 在移动端无法获取 Canvas 内容？
【发布时间】：2013-09-29 02:30:02
【问题描述】：

我正在尝试从画布中获取图像，它适用于 PC 浏览器，但不适用于移动设备（我在 Safari 中的 iPhone 上进行了测试）...

代码如下：

$('#draw').click(function() {            
    $('#drawing').css("visibility", "visible");         
    var drawing = document.getElementById("drawing");
    var con = drawing.getContext("2d");         
    var img = new Image();
    img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
    img.onload = function() {                
        con.drawImage(img, 0, 0, 250, 250);
        //Generate Image
        var drawing = document.getElementById("drawing");
        var dataURL = drawing.toDataURL(); //Does nothing on mobile, not even an error
        document.getElementById("result").src = dataURL;
    };                  

});

有什么原因吗？

【问题讨论】：

然后返回什么？
@fiddler，它没有返回任何东西......什么也没发生，我尝试显示带有警报的内容，但没有显示，因为它停在 toDataUrl 行......
我刚刚看到它不能在 Safari 上运行，它可以在 Chrome 和三星 S3 浏览器上运行... Safari 无法解析到 DataURL，我不知道为什么...
而且，我在 iOS 6 上进行了测试，并在 Safari 上工作！它不适用于 iOS 7...
@CarinaPilar 你有解决这个问题的办法吗？

标签： javascript iphone html mobile canvas

【解决方案1】：

我也有同样的问题。在装有 Android 2.3 的 HTC Desire、装有 Android 4.0 和 iPhone 7s 的 HTC One 上进行了测试……我在toDataURL() 上运行，但只得到“数据：”作为输出。

根据here，Android 不支持它，不知道 iOS7，但似乎也不支持。

顺便说一句。有理由打电话给var drawing = document.getElementById("drawing"); 两次吗？

【讨论】：

没有理由调用两次...是的，我想它不支持... =/
尝试更小的画布尺寸。我认为它耗尽了内存。我正在获取“数据：”，并试图解析相机中的照片 - 一旦我缩小画布，我就开始获取数据。
好吧，当我回答时，它不被支持。据我所知，现在应该是这样，尽管有人抱怨性能。 @CarinaPilar 将不得不再试一次；）