FabricJS SVG 到 canvas（使用 FileReader）

Question

在我的页面上，我有一个按钮和一个具有以下属性的 canvas -

<button onclick="openSVG()">Open</button>
<canvas></canvas>

单击按钮时，openSVG() 函数应该

让用户 select 从他们的本地硬盘打开一个 SVG 文件（之前使用 FabricJS 创建）
使用 FileReader 读取 SVG 文件的内容并将其存储在变量中
使用该变量填充 canvas 使用 fabric.loadSVGFromString() 方法

现在单击“打开”按钮会打开一个文件 selection window，但不会将对象绘制到 canvas 中。这是我的 openSVG() 函数 -

function openSVG() {

// importing file
var input = $(document.createElement('input'));
input.attr("id", "mySVGFile")
input.attr("type", "file");
input.trigger('click');

//storing file contents in var using FileReader
var myInputFile = document.getElementById('mySVGFile');
var myFile = myInputFile.files[0];

var fr = new FileReader();
fr.onload = function(){

    var canvasD = this.result;

    //loading data from var to canvas
    fabric.loadSVGFromString(canvasD, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        canvas.add(obj).renderAll();
    });
};

fr.readAsText(myFile); }

我是 FileReader 的新手。控制台中没有错误，所以我什至不知道哪里出错了。我的方法行不通吗？有没有更好的方法可以实现我想要的。

Answer 1

这里有一个更简单更好的方法，使用 URL.createObjectURL() 方法 ...

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

function openSVG(e) {
   var url = URL.createObjectURL(e.target.files[0]);
   fabric.loadSVGFromURL(url, function(objects, options) {
      objects.forEach(function(svg) {
         svg.set({
            top: 90,
            left: 90,
            originX: 'center',
            originY: 'center'
         });
         svg.scaleToWidth(50);
         svg.scaleToHeight(50);
         canvas.add(svg).renderAll();
      });
   });
}

canvas{margin-top:5px;border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<input type="file" onchange="openSVG(event)">
<canvas id="c" width="180" height="180"></canvas>

FabricJS SVG 到 canvas（使用 FileReader）

FabricJS SVG to canvas (using FileReader)

html

javascript

svg

canvas

fabricjs