如何使用Fabric.js將多個圖像從本地磁盤添加到畫布？

我使用Fabric.js在HTML5 canvas中創建圖像拼貼應用程序。我希望該用戶可以將文件拖放到「文件拖放區域」，也可以從他的本地磁盤上「選擇文件」。請幫我實施這個。如何使用Fabric.js將多個圖像從本地磁盤添加到畫布？

我使用此代碼來添加多個圖像。現在，我想從我的本地磁盤添加圖像到畫布上。

//Image 1 
fabric.Image.fromURL('/3.jpg', function (img) { 
     var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     canvas.setActiveObject(oImg); 

    }); 

//Image 2 
fabric.Image.fromURL('/bokeh.jpg', function (img) { 
     var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     canvas.setActiveObject(oImg); 
    });

來源

2013-06-25 Prateek Saini

告訴我們你先試了一下。在Stackoverflow上有很多資源已經解釋瞭如何處理文件上傳。 –

@RayNicholus 查看代碼。 –

嘿，我有拖放的解決方案，並選擇文件，但沒有一個答案其實我有兩個不同的獨立的解決方案拖放： http://jsfiddle.net/rodrigopandini/gj7HT/

選擇文件：

<input type="file" id="imgLoader"> 

    <canvas id="c" width="300" height="300"></canvas> 
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"> </script> 
<script type="text/javascript> 
canvas = new fabric.Canvas('c'); 

document.getElementById('imgLoader').onchange = function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { console.log('fdsf'); 
     var imgObj = new Image(); 
     imgObj.src = event.target.result; 
     imgObj.onload = function() { 
      // start fabricJS stuff 

      var image = new fabric.Image(imgObj); 
      image.set({ 
       left: 250, 
       top: 250, 
       angle: 20, 
       padding: 10, 
       cornersize: 10 
      }); 
      //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 
      canvas.add(image); 

      // end fabricJS stuff 
     } 

    } 
    reader.readAsDataURL(e.target.files[0]); 
} 
</script>

U可以在一個腳本中嘗試使用這些代碼。

來源

2013-07-03 04:37:02 Cathy

如何使用Fabric.js將多個圖像從本地磁盤添加到畫布？

回答

相關問題