javascript - 使用 Fabric Js 将 Svg 转换为 Canvas 会污染 Canvas

Question

我正在使用fabric.js将svg转换为canvas，我使用的代码在chrome中工作正常，但在IE 11中创建的canvas被污染，从而阻止我从canvas读取数据，下面是我的代码使用

    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 创建 Canvas 而不污染 Fabric.js 中的 Canvas ？

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

Answer 1

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

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

您将把 SVG 图像值放入 svg_image 变量中。