CODEWITHSUNDEEP
fabricjs
Umesh Jumare
Umesh Jumare

Reputation: 13

File Input fabric js adds images

I have a canvas and have 2 images on it one is not evented and other we can change. Now I'm trying to change/replace image using file input, everything is fine just while changing the image it replaces the one I want but also adds one on top. I want to change the Image with id='changeimg'

//Add Image to Canvas
var imgObj = new Image();
//imgObj.id='changeimg';
imgObj.src = "blank.png";
var imgmain = imgObj.onload = function() {
  var image = new fabric.Image(imgObj);
  image.set({
    id: 'changeimg',
    angle: 0,
    height: 350,
    width: canvas.getWidth(),
    align: 'mid', //added
    originX: 'center', //added
    originY: 'center', //added
  });

  canvas.centerObject(image);
  canvas.add(image);
}

var imgObj1 = new Image();
//imgObj1.id='backgroundimg';
imgObj1.src = "template1.png";
var imgmain = imgObj1.onload = function() {
  var image1 = new fabric.Image(imgObj1);
  image1.set({
    id: 'backgroundimg',
    angle: 0,
    height: canvas.getHeight(),
    width: canvas.getWidth(),
    evented: false,
  });

  //canvas.centerObject(image1);
  canvas.add(image1);
}

//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(file) {
    addImage(file.target.result);
  }
  reader.readAsDataURL(file);
}

function addImage(imgLink) {
  fabric.Image.fromURL(imgLink, function(img) {
    img.set({
      'left': 50
    });
    img.set({
      'top': 150
    });
    img.scaleToWidth(250);
    img.scaleToHeight(250);
    var cnt = 0;
    var objs = canvas.getObjects();
    //var objs = canvas.getActiveObject();
    if (objs.length > 0) {
      objs.forEach(function(e) {
        if (e && e.type === 'image' && e.id === "changeimg") {
          e._element.src = imgLink;;
          canvas.renderAll();
          cnt = 1;
        }
      });
    }
  });
}

Upvotes: 0

Views: 532

Answers (1)

Durga
Durga

Reputation: 15604

Use imageEl.setSrc to change source of image element.

DEMO 

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL("https://picsum.photos/200/300/?random", function(img) {
  img.set({
    id: 'changeimg',
    align: 'mid', //added
    originX: 'center', //added
    originY: 'center', //added,
    scaleX: 200 / img.width,
    scaleY: 200 / img.height,
  });
  canvas.centerObject(img);
  canvas.add(img);
  image = img;
})
fabric.Image.fromURL("https://picsum.photos/200/250/?random", function(img) {
  img.set({
    id: 'backgroundimg',
    angle: 0,
    scaleX: canvas.width / img.width,
    scaleY: canvas.height / img.height,
  });
  //canvas.centerObject(image1);
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
})

//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(file) {
    addImage(file.target.result);
  }
  reader.readAsDataURL(file);
}

function addImage(imgLink) {
  fabric.Image.fromURL(imgLink, function(img) {
    var objects = canvas.getObjects();
    for (var i = 0, l = objects.length; i < l; i++) {
      if (objects[i].id == 'changeimg') {
        imageEl = objects[i];
        break
      }
    }
    if (imageEl) {
      imageEl.setSrc(img.getSrc(), function() {
        canvas.renderAll()
        imageEl.setCoords();
      },{
        left: 50,
        top: 150,
        scaleX: 150 / img.width,
        scaleY: 200 / img.height,
      })
    }
  });
}
canvas{
 border:2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width=500 height=500></canvas><br>
<input type='file' id='uploadedImg'>

Upvotes: 1

Related Questions