'Canvas.toDataURL not working on mobile Safari iOS?

I tried the following. I created an <img> from an svg image. Then I draw it on a canvas and finally I exported it as PNG and set the resulting PNG as a new <img>. It works well on Android, Chrome, Safari, FireFox. But, canvas.toDataUrl() is not working on mobile Safari on iOS. It is only working when you don't use SVG images on the canvas.

Here is the code I use for 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";

I created a JSFiddle here: http://jsfiddle.net/confile/ZqJYG/

The problem occurs only when you run it on iOS. It does not run on mobile Safari and not on mobile Chrome.

Is there a workaround for this problem?

javascriptioshtmlcanvas


Solution 1:[1]

This may or may not be the same issue, but I was getting "data:," back from this call on iOS (worked everywhere else) and managed to solve the problem by dramatically reducing the size of the canvas. I think it was running out of memory either loading the image or returning the string, and dealing with it in a particularly useless fashion.

Solution 2:[2]

I think your browser may not support it . see the following.

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

You can also test your browser support by using the following code:

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

Hope this helps.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris Rae
Solution 2 Finoy Francis

Related Questions