Canvas.toDataURL() Issue. Is there an alternative?

Question

Probably this has been brought up many times. But i need to get a final answer to it.

I have an SVG file loaded onto a browser using an object html tag. Using javascript and the DOM, the user alters that file and customizes its colors elements and alot more. Basically it is a customizer of a jacket. I am not using canvas for this. This is pure svg exported from illustrator and altered.

All is going well until the point where i have to export the altered version of this svg to the server to create a pdf document that contains this customized image. Obviously i need to send an ajax request to the server which contains the base64 string of this image.

Anyone i ask will say that i should create an image via javascript, assign the src attribute to the SVG's serialized XML and then draw it to a canvas to extract the base64 string.

All is well until i hit the toDataURL() method (or getImageData() method). It is only working on Firefox. Other browsers are throwing the security breach exception. That is obviously unacceptable.

I have lost hope to get this done since drawing the image to the canvas is tainting it. Is there a way to work around this issue without changing the whole structure of the webpage?

possible duplicate of [Is there an equivalent of canvas's toDataURL method for SVG?](http://stackoverflow.com/questions/3173048/is-there-an-equivalent-of-canvass-todataurl-method-for-svg) — Robert Longson, Oct 16 '13 at 13:12
Hey @RobertLongson. I have already read that article and i understood that "so far" it is not possible until they get it fixed. The project I am working on is a pain. Do you need a detailed explanation about the page functionality? For advice that is. — M O H, Oct 17 '13 at 10:40
Chrome is open source. You could always submit a patch which fixes it ;=) — Robert Longson, Oct 17 '13 at 13:38

score 0 · Answer 1 · answered Oct 16 '13 at 13:16

0

SVG is text. That's probably "altering structure", but you could send the diff of the SVG tree to the server without the whole base64 rigmarole.

Otherwise, there shouldn't be a security error if the SVG object comes from the same domain as your script. Could you mirror the object on the same server as your webpage?

answered Oct 16 '13 at 13:16

qternion

526
3
8

1

When Chrome fix their bug they won't be adding a same-domain check as the domain of the image is not relevant to the privacy issues in allowing pixel access to SVG images. – Robert Longson Oct 16 '13 at 13:17
The SVG files exists in the website directory. How can it be considered from a different domain? – M O H Oct 17 '13 at 11:46

score 0 · Answer 2 · answered Oct 16 '13 at 13:16

0

I'm working in a printing industry and if you can keep your SVG in vector, employees will be happy. Here's a library wich can convert SVG to PDF : http://d3export.cancan.cshl.edu/.

answered Oct 16 '13 at 13:16

L105

5,379
3
18
23

Great Library. But that saves the svg to the user computer. Which will cut off alot more functionality from the server side. One example is that this pdf needs to be emailed. Thanks anyways, this might come in handy – M O H Oct 17 '13 at 10:38
I suppose that you can modify it to save it to your server instead of user computer. – L105 Oct 17 '13 at 13:13

score 0 · Accepted Answer · edited Nov 08 '17 at 13:08

I solved the .toDataURL() issue by using fabric js.

var a = document.getElementById("theSVG"); //This is the <object>
a.setAttribute('data', 'worldmap.svg'); //Setting the data attribute to the svg file


a.onload = function () {

    var svgDoc = a.contentDocument;
    var s = new XMLSerializer();
    var xml = s.serializeToString(svgDoc);
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    var canvas = new fabric.Canvas('canvas');

    var svg = xml;

    fabric.loadSVGFromString(svg, function (objects, options) {
        var loadedObject = fabric.util.groupSVGElements(objects, options);
        canvas.add(loadedObject);
        canvas.calcOffset();
        canvas.renderAll();
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('This browser doesn\'t provide means to serialize canvas to an image');
        }
        else {
            window.open(canvas.toDataURL('png'));
        }

    });
}

This got me through the .toDataURL() issue but now new things came up so wish me luck.

Canvas.toDataURL() Issue. Is there an alternative?

3 Answers3