Canvas.toDataURL not working on mobile Safari iOS?

Question

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?

Solution 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

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.

Comments

[Simon Bengtsson]

The max size of our canvas was 2000 pixels, but when we lowered it to 1500 it worked. We had problems on <= iPhones 5.

[Matt Jensen]

Glad to see Safari sorted this out. Found in mobile Safari at iOS 8.3. Later versions didn't seem to have this memory issue.