html5 canvas becomes write only after drawing svg inside on ios safari

Question

Will describe app at first.

I have drawing area. I can add to it different images and apply few filters to them(brightness, hue-rotate, etc.). After editing is ready I should save result to server as image.

During investigation I found few possible solutions

Using fabricjs filters. The problem is that performance is not so good as I need, especially on mobile devices.
Using css3 filters. The idea was to use css3 filters for interface and then use fabricjs filters when we render final result. This idea was rejected because anyway we need another solution for other browsers, and it is hard to make filters work identically.
Using svg filters. I stopped on svg filters with next realization:

3.1 I add svg element on drawing area and apply svg filters to it.

3.2 When user try to save result I generate svg xml and create base64 image
```
'data:image/svg+xml;base64,' + window.btoa(this.getSvg());
```
3.3 I draw this svg on canvas. And try to save result
```
resultCanvas.toDataURL()
```

This solution worked in almost all modern browsers with good performance. But it do not work on ios safari because canvas becomes write only after drawing svg and I got Security Error, DOM exception 18.

To prevent this, I was thinking to save svg to server, and draw image from server on canvas. But it also do not work.

I wrote small test:

Tests.supportSvgToPng = function(){
    var canvas = document.createElement('canvas'),
        svgSrc = 'images/facebook.svg',
        support = true;

    var image = new Image();
    image.src = svgSrc;

    document.body.appendChild(canvas);
    context = canvas.getContext("2d");

    try {
        context.drawImage(image, 0, 0);
        canvas.toDataURL();
    } catch(e) {
        console.log(['supportSvgToPng', e.message]);
        support = false;
    }

    canvas.parentNode.removeChild(canvas);

    return support;
}

How can I circumvent this limitation?

This is probably an issue with Safari. SVG use in canvas has up to now been very strict due to SVG capability to embed foreign objects. Most browsers has lifted the security on some parts but there are probably still restrictions in Safari. I would suggest you post this as an issue with the Safari team, or search their database to see if it's already reported. — , Apr 05 '14 at 06:34
On mobile Safari I cannot convert an SVG image on a Canvas to PNG. Do you have a solution for that? — Michael, May 21 '14 at 14:00
No, I did not dealt with this issue from that time, І will be glad if you will share solution, if you will find it. — jaromudr, May 21 '14 at 15:37

html5 canvas becomes write only after drawing svg inside on ios safari

0 Answers0