Wie lade ich ein Bild mit Fabric.js auf eine Leinwand hoch?

Question

Ich möchte, dass ein Prozess erstellt wird, wo die Benutzer ihre Bilder hochladen können und sie dann im Browser in einem Canvas mit Fabric.js mit einigen Schaltflächen bearbeiten -wich verwendet Fabric.js, um einige Effekte hinzuzufügen.

Ich kann es nicht funktionieren lassen. Mein HTML ist:

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

Der Javascript ist folgende:

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); 
    }); 
}); 

Answer 1

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]); 
} 

Answer 2

Sie können Stoff js und seine auch ziehbar einem Ort an einen anderen Ort in Leinwand mehrere Bild hochladen.

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>

Answer 3

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();