FabricJS SVG Leinwand (mit Filereader)

Question

Auf meiner Seite habe ich einen Knopf und eine Leinwand mit den folgenden Attributen -

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

Klicken auf die Schaltfläche, die openSVG() Funktion soll

• Lassen Sie den Benutzer eine SVG-Datei von ihrer lokalen Festplatte auswählen und öffnen (zuvor mit FabricJS erstellt)
• Lesen Sie den Inhalt der SVG-Datei mit FileReader und speichern Sie es in einer Variablen
• diese Variable Mit Hilfe der Leinwand mit fabric.loadSVGFromString() Methode

Jetzt auf Schaltfläche Öffnen öffnet sich ein Dateiauswahlfenster zu füllen, aber tut Objekte in Leinwand ziehen. Hier ist meine openSVG() -Funktion -

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); } 

Ich bin neu in FileReader. Es gibt keine Fehler in der Konsole, sodass ich nicht einmal sagen kann, wo ich falsch liege. Funktioniert mein Ansatz nicht? Gibt es einen besseren Weg, um das zu erreichen, was ich will?

Answer 1

Hier ist ein viel einfacherer und besserer Ansatz URL.createObjectURL() Methode ...

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>