使用Fabric Js对画布进行Svg到画布转换会污染画布

Question

I am using fabric.js to convert svg to canvas, the code that i use works fine in chrome but in IE 11 the canvas that is created is getting tainted thus preventing me from reading data from canvas,below is code that i use

    var d3canvas = document.createElement('canvas');
    d3canvas.id = canvasId;

    fabric.loadSVGFromString(svg.node().parentNode.innerHTML, function (objects, options) {
        var canvasObj = new fabric.Canvas(canvasId);
        var obj = fabric.util.groupSVGElements(objects, options);
        canvasObj.add(obj).renderAll();

        var canvasdata = d3canvas.toDataURL("image/bmp");//this line causes error as canvas is tainted
}

my question is whether there is a way to create canvas from svg without tainting the canvas in Fabric.js?

Note:I have already used canvg to convert svg to canvas but as the svg is complex its not getting properly converted to canvas

Answer 1

First deselect all object of canvas and use below code to convert canvas to SVG.

canvas.deactivateAllWithDispatch();
canvas.renderAll();
var image   = canvas.toSVG();
var svg_image = "data:image/svg+xml,"+encodeURIComponent(image);

You will get SVG image value into svg_image variable.