如何使用Fabric.js將圖像上載到畫布上？

我希望創建一個用戶可以上傳圖像的過程，然後使用一些按鈕在Fabric中使用Fabric.js在瀏覽器中編輯它們 - 使用Fabric.js添加一些效果。如何使用Fabric.js將圖像上載到畫布上？

我不能讓它工作。我的HTML是：

<form id="uploadImg" runat="server"> 
    <input type="file" id="uploadedImg"/> 
</form> 
<canvas id="canvas"></canvas>

的JavaScript如下：

var canvas = new fabric.Canvas('canvas'); 
canvas.setHeight(480); 
canvas.setWidth(640); 

$('#uploadedImg').change(function() { 
    var imgData = $(this).files[0]; 
    fabric.util.loadImage(imgData, function(img) { 
     var oImg = new fabric.Image(img); 
     oImg.scale(0.2).set({ 
      left: 100, 
      top: 100, 
     }); 
    canvas.add(oImg); 
    }); 
});

來源

2014-02-11 Erzei

剛剛發現有一個工作示例 [這裏]（答案http://stackoverflow.com/questions/15226332/add-image-from-user-computer- to-canvas） – Erzei

document.getElementById('imgLoader').onchange = function handleImage(e) { 
var reader = new FileReader(); 
    reader.onload = function (event){ 
    var imgObj = new Image(); 
    imgObj.src = event.target.result; 
    imgObj.onload = function() { 
     var image = new fabric.Image(imgObj); 
     image.set({ 
      angle: 0, 
      padding: 10, 
      cornersize:10, 
      height:110, 
      width:110, 
     }); 
     canvas.centerObject(image); 
     canvas.add(image); 
     canvas.renderAll(); 
    } 
    } 
    reader.readAsDataURL(e.target.files[0]); 
}

來源

2014-04-02 14:32:58 samad

感謝此代碼正常工作。但是當我試圖連續上傳相同的圖片時，第二次沒有上傳 –

您可以通過面料js和其也可拖動一個地方到另一個地方，在畫布上上傳多個圖像。

var canvas = new fabric.Canvas('canvas'); 
 
document.getElementById('file').addEventListener("change", function (e) { 
 
    var file = e.target.files[0]; 
 
    var reader = new FileReader(); 
 
    reader.onload = function (f) { 
 
    var data = f.target.result;      
 
    fabric.Image.fromURL(data, function (img) { 
 
     var oImg = img.set({left: 0, top: 0, angle: 0,width:100, height:100}).scale(0.9); 
 
     canvas.add(oImg).renderAll(); 
 
     var a = canvas.setActiveObject(oImg); 
 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
 
    }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
});

canvas{ 
 
    border: 1px solid black; 
 
} 
 

 

 
Include it like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<input type="file" id="file"><br /> 
 
<canvas id="canvas" width="450" height="450"></canvas>

來源

2016-04-25 04:50:17

嘿，謝謝你的例子，非常酷。 – Chazt3n

@ Chazt3n。祝你好運.. –

var canvas = new fabric.Canvas('main-canvas'); 
     canvas.selection = false; 
     var imgElement = document.getElementById("img11"); 

     var imgInstance = new fabric.Image(imgElement, { 
      angle: 0, 
      position: 'absolute', 
      opacity: 1, 
      originX: 'left', 
      originY:'top', 
      meetOrSlice:'slice', 

     }); 
     imgInstance.selectable = false; 
     canvas.add(imgInstance); 
     canvas.renderAll();

來源

2017-06-29 08:21:07

如何使用Fabric.js將圖像上載到畫布上？

回答

相關問題