Existe-t-il un moyen d'importer un fichier image en utilisant fabric.js?

Question

Je travaille actuellement sur l'importation de fichiers png ou svg sur un canevas en utilisant la bibliothèque fabric.js et un bouton de fichier d'entrée. Le code ci-dessous ne fonctionne que si l'image est dans le dossier racine. Je sais que je n'ai pas accès au chemin du fichier, j'ai donc essayé de créer un élément à partir du fichier. Il n'y a pas d'erreur dans la console mais rien n'apparaît dans la toile. Y a-t-il un moyen de faire fonctionner l'importation ou existe-t-il une bibliothèque différente qui pourrait m'aider à faire cela? J'utilise fabric.js pour pouvoir mettre à l'échelle et déplacer les images dans la toile.

function upload(){ 
    var canvas = new fabric.Canvas('canvas'); 
    var file = document.getElementById('file').files[0].name; 
    fabric.Image.fromURL(file, function(img) { 
     canvas.add(img); 
    }) 
} 

Answer 1

Oui!

Il existe un moyen d'importer un fichier image/svg utilisant FabricJS, et qui est la suivante ...

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

 
function upload(e) { 
 
    var fileType = e.target.files[0].type; 
 
    var url = URL.createObjectURL(e.target.files[0]); 
 

 
    if (fileType === 'image/png') { //check if png 
 
     fabric.Image.fromURL(url, function(img) { 
 
     img.set({ 
 
      width: 180, 
 
      height: 180 
 
     }); 
 
     canvas.add(img); 
 
     }); 
 
    } else if (fileType === 'image/svg+xml') { //check if svg 
 
     fabric.loadSVGFromURL(url, function(objects, options) { 
 
     var svg = fabric.util.groupSVGElements(objects, options); 
 
     svg.scaleToWidth(180); 
 
     svg.scaleToHeight(180); 
 
     canvas.add(svg); 
 
     }); 
 
    } 
 
}

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

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