CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvasfabricjs
user1230041
user1230041

Reputation:

How to upload an image to a canvas with Fabric.js?

I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons, which uses Fabric.js to add some effects.

I can't make it work. My HTML is:

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

The JavaScript is the following:

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

Upvotes: 18

Views: 32740

Answers (4)

melchiar
melchiar

Reputation: 2862

This is an old question and some of the existing answers here appear to be broken. Here is a working example of how to add an image to a Fabric.js canvas using a file input, and then scaling it to fit inside the canvas.

This example will work for current versions of the library.

var canvas = new fabric.Canvas('canvas');

document.getElementById("uploader").onchange = function(e) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function() {
      var img = new fabric.Image(image);
      img.set({
        left: 100,
        top: 60
      });
      img.scaleToWidth(200);
      canvas.add(img).setActiveObject(img).renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<input id="uploader" type="file"/>
<canvas id="canvas" width="400" height="300" style="border:1px solid black"></canvas>

Upvotes: 6

Varun Sharma
Varun Sharma

Reputation: 4842

You can upload multiple image by fabric js and its also draggable one place to another place in canvas.

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>

Upvotes: 20

Rajat Jain
Rajat Jain

Reputation: 134

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

Upvotes: 0

samad
samad

Reputation: 251

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

Upvotes: 25

Related Questions