Why toDataURL Does Not Get Canvas Content on Mobile?

问题

I'm trying to get an image from a canvas, it worked on pc browsers, but not on mobile (I tested on an iPhone in Safari)...

Here is the code:

$('#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;
    };                  

});

Any hint of why?

回答1:

I have the same issue. Tested on HTC Desire with Android 2.3, HTC One with Android 4.0 and iPhone 7s ... I run over the toDataURL() but only get "data:," as output.

According to here it's not supported by Android, dunno about iOS7 but it seems it isn't either.

Btw. is there a reason for calling var drawing = document.getElementById("drawing"); twice?

来源：https://stackoverflow.com/questions/18972038/why-todataurl-does-not-get-canvas-content-on-mobile