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

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

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

Comments

[Mr Pablo]

Just came across this solution. It works really well, however, I need some extra functionality. You see, I need to be able to add duplicates of the selected image. The code above only lets me choose 1 instance of an image file. Is there a way to allow multiple uses of the same image?

[Jaibuu]

In that example, an image is created and stored as the variable imgObj, you may re-use that one, and create new Fabric objects as many times as you want ;). In any case It might be best to create a new more specific question.

[nicholaswmin]

@Jaibuu you missed a bracket for closing the imgObj.onload function

[Amit Kumar Khare]

Thanks @Jaibuu, You made my day! :)

[Gislef]

to work simply delete the all.js and include the link fabric.min.js. The link All.js do not exist anymore.