Aggiungi immagine dal computer dell'utente al canvas

Question

Sto lavorando a un'applicazione Web che consente agli utenti di creare una presentazione dinamica. Attualmente ho un problema indipendentemente da come aggiungere l'immagine dell'utente del computer alla tela. Sto usando un pulsante di input per ottenere il file dal computer e fa appello a una funzione che aggiungerà l'immagine al canvas.

Finora ho provato diversi modi per aggiungere l'immagine sulla tela, così come questo: Dynamically add image to canvas

Ma il codice che mostrano lavoro qui doesnt nel mio caso, perché appena disegnare l'immagine nella tela ma non permetterà che sia trascinabile e ridimensionabile proprio come la demo di Kitchensink.js di Fabricsjs.

Ho anche cercare di convertire l'immagine in Base64 e utilizzare il LoadJSON per riconvertirlo, ma ho incontrato questo errore: riferendosi

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 

del Comparto alla funzione che ho chiamato per aggiungere l'immagine.

Ho anche provare questo codice:

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

che catturano questi errori:

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 

Ho eseguito Cleary di idee e raggiunto solo per disegnare l'immagine, ma non aggiungerla alla tela.

Tutto in uno mi piacerebbe aggiungere un'immagine al mio canvas Fabricjs con gli stessi attributi indipendentemente dal trascinabile come la demo Kitchensink. Grazie per l'aiuto :)

Answer 1

C'è un errore di base nel codice, si sta tentando di aggiungere i dati dell'immagine all'attributo src dell'oggetto fabric.Image.

Quello che dovete fare, è quello di creare un oggetto immagine con il risultato, e passarlo all'oggetto fabric.Image, in questo modo:

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

Ho fatto un esempio di lavoro qui: http://jsfiddle.net/jaibuu/Vp6wa/

Answer 2

Carica immagine in tela dal computer con 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>