FabricJS SVG到畫布（使用FileReader）

Question

在我的頁面上，我有一個按鈕和一個具有以下屬性的畫布-

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

單擊按鈕后， openSVG()函數應該可以

• 讓用戶從其本地硬盤驅動器中選擇並打開SVG文件（以前使用FabricJS創建）
• 使用FileReader讀取SVG文件的內容並將其存儲在變量中
• 使用該變量通過fabric.loadSVGFromString()方法填充畫布

現在單擊“打開”按鈕將打開一個文件選擇窗口，但不會將對象繪制到畫布中。 這是我的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>