有沒有辦法使用fabric.js導入圖像文件？

我目前正在使用fabric.js庫和輸入文件按鈕將png或svg文件導入到畫布上。下面的代碼僅在圖像位於根文件夾中時才起作用。我知道我沒有訪問文件路徑，所以我嘗試從文件中創建一個元素。控制檯中沒有錯誤，但畫布中沒有顯示任何錯誤。有沒有辦法使輸入工作，或有一個不同的圖書館，可以幫助我做到這一點？我正在使用fabric.js，以便能夠在畫布內縮放和移動圖像。有沒有辦法使用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); 
    }) 
}

來源

2017-06-25 spalm

是的！

有一種方法導入使用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>

來源

2017-06-25 12:03:04

有沒有辦法使用fabric.js導入圖像文件？

回答

相關問題