Question

我正在使用fabric.js将svg转换为canvas，我使用的代码在chrome中运行良好但在IE 11中创建的画布变得污染，从而阻止我从画布中读取数据，下面是我的代码使用

    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
}

我的问题是，是否有办法从svg创建画布而不会污染Fabric.js中的画布？

注意：我已经使用canvg将svg转换为canvas但由于svg很复杂，因此无法正确转换为canvas

Answer 1

首先取消选择画布的所有对象，然后使用下面的代码将画布转换为SVG。

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

您将SVG图像值转换为svg_image变量。

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

1 个答案: