fabric.jsを使用してイメージファイルをインポートする方法はありますか？

Question

私は現在、fabric.jsライブラリと入力ファイルボタンを使用して、キャンバスにpngまたはsvgファイルをインポートしています。以下のコードは、イメージがルートフォルダにある場合にのみ機能します。私はファイルパスにアクセスできないことを知っているので、ファイルから要素を作成しようとしました。コンソールにエラーはありませんが、キャンバスには何も表示されません。輸入作業を行う方法はありますか、これを行うのに役立つ別の図書館がありますか？私はfabric.jsを使用して、キャンバス内の画像を拡大縮小して移動できるようにしています。

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

はい！

ありFabricJSを使用して画像/ SVGファイルをインポートする方法があり、以下のようにそれはある...

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>