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?

Answer 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.