Bild von Benutzer Computer zu Leinwand hinzufügen

Question

Ich arbeite an einer Web-App, mit der Benutzer dynamische Diashow erstellen können. Derzeit habe ich ein Problem, unabhängig davon, wie das Bild vom Benutzer des Computers zur Leinwand hinzugefügt wird. Ich benutze eine Eingabe-Taste, um die Datei vom Computer zu bekommen und es appelliere an eine Funktion, die das Bild auf der Leinwand hinzufügen wird.

Bisher habe ich verschiedene Wege versucht, das Bild auf die Leinwand sowie diese zu addieren: Dynamically add image to canvas

Aber der Code zeigt hier nicht funktioniert in meinem Fall, weil es nur das Bild in die Leinwand ziehen aber es lässt nicht zu, dass es wie die Kitchensink.js-Demo von Fabricsjs ziehbar und in der Größe veränderbar ist.

Ich habe auch versuchen, das Bild in Base64 und verwenden Sie die loadJson konvertieren es zurück zu konvertieren, aber ich begegnet diesen Fehler:

Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089 
enlivenObjects fabric.js:2089 
fabric.util.object.extend._enlivenObjects fabric.js:9025 
fabric.util.object.extend.loadFromJSON fabric.js:8953 
sub 

Subs refering auf die Funktion i genannt habe das Bild hinzuzufügen.

Ich habe auch versuchen, diesen Code:

document.getElementById('imgLoader').onchange = function handleImage(e){ 
var reader = new FileReader(); 
reader.onload = function(event){ 
var img = new fabric.Image(); 
img.onload = function(){ 
img.set({ 
    left : 250, 
    top : 250, 
    angle : 20, 
     padding: 10, 
     cornersize: 10 
    }); 
    image.scale(getRandomNum(0.1, 0.25)).setCoords(); 
    canvas.add(image); 
} 
img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]); 
} 

Welche diese Fehler zu fangen:

Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358 
fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358 
fabric.Image.fabric.util.createClass._initConfig fabric.js:14334 
fabric.Image.fabric.util.createClass.setElement fabric.js:14127 
fabric.Image.fabric.util.createClass._initElement fabric.js:14322 
fabric.Image.fabric.util.createClass.initialize fabric.js:14097 
(anonymous function) fabric.js:2679 
klass fabric.js:2728 
reader.onload diapo.js:746 

ich aus Ideen cleary Lauf haben und nur das Bild zu zeichnen erreicht, aber das Hinzufügen es nicht auf die Leinwand.

Alles in einem möchte ich meiner Fabricjs Canvas mit den gleichen Attributen ein Bild hinzufügen, unabhängig von der ziehbaren wie die Kitchensink-Demo. Vielen Dank im Voraus für Ihre Hilfe :)

Answer 1

Es gibt einen grundlegenden Fehler in Ihrem Code, Sie versuchen, die Bilddaten zum src Attribut des fabric.Image Objekts hinzuzufügen.

Was Sie tun müssen, ist ein Bildobjekt mit dem Ergebnis zu erstellen, und es zu dem Objekt fabric.Image passieren, wie folgt aus:

var imgObj = new Image(); 
imgObj.src = event.target.result; 
imgObj.onload = function() { 
    var image = new fabric.Image(imgObj); 
} 

ich ein funktionierendes Beispiel gemacht hier: http://jsfiddle.net/jaibuu/Vp6wa/

Answer 2

Bild in Leinwand vom Computer hochladen von Fabric 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: 00,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; 
 
}

<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>