Add image from user computer to canvas

Question

i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas. I'm using a input button to get the file from the computer and it appeal a function who will add the image to the canvas.

So far i've tried different ways to add the image to the canvas as well as this one : Dynamically add image to canvas

But the code showing here doesnt work in my case, because it just draw the image into the canvas but it wont allow it to be draggable and resizable just like the Kitchensink.js demo from Fabricsjs.

I've also try to convert the image into Base64 and use the LoadJSON to convert it back but i encountered this error :

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

Sub's refering to the function i've called to add the image.

I've also try this 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]);
}

Which catch these errors :

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 

I've cleary run out of ideas and only achieved to draw the image but not adding it to the canvas.

All in one i'd like to add an image to my Fabricjs canvas with the same attributes regardless the draggable as the Kitchensink demo. Thanks in advance for your help :)

Answer 1

There is one basic mistake in your code, you are trying to add the image data to the src attribute of the fabric.Image object.

What you need to do, is to create an Image object with your result, and pass it to the fabric.Image object, like this:

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

I made a working example here: http://jsfiddle.net/jaibuu/Vp6wa/

Answer 2

Upload image in canvas from computer by 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>