CODEWITHSUNDEEP
javascripthtmlcanvasfabricjs
anonymoose
anonymoose

Reputation: 1243

How do I replace an image on a canvas onclick?

I'm using fabricjs to place an image on a canvas. I'd like to learn what I need to do to to replace the already drawn image with another one from a url onclick.

My limited understanding has me thinking I need to maybe set a var for each image but I'm not sure how to connect that with the fabricjs canvas. I've spent the last few hours trying different things without any luck.

I tried submitting a similar question but deleted it because I thought maybe it was too complicated an ask. Any help would be greatly appreciated. Here's my code now:

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

fabric.Image.fromURL('http://lorempixel.com/400/400/', function(img) {
  var oImg = img.set({
    selectable: false
  })
  canvas.add(oImg).renderAll();
});
canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<canvas id="c" width="400" height="400"></canvas>

Upvotes: 1

Views: 2256

Answers (3)

Durga
Durga

Reputation: 15604

var canvas = new fabric.Canvas('c');
var oImg;
loadImage();
function loadImage(){
  fabric.Image.fromURL('https://lorempixel.com/400/400/',    function(img) {
    oImg && canvas.remove(oImg); //If image element alread added to canvas remove it.
    oImg = img.set({
      selectable: false
    })
    canvas.add(oImg); //add new image to canvas
    oImg.on('mousedown',onImgMouseDown); //add mouse down lisner to image
  });
}

function onImgMouseDown(){
 loadImage();
}
canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<canvas id="c" width="400" height="400"></canvas>

Alternative you add mousedown listener to image , and check if element added ,then remove it from canvas. then add new one to canvas.

Upvotes: 1

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

This is how you could achieve that :

var canvas = new fabric.Canvas('c');
var image, isImageLoaded;

fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
   isImageLoaded = true;
   image = img.set({
      selectable: false
   })
   canvas.add(image).renderAll();
});

function replaceImage(imgUrl) {
   if (!isImageLoaded) return; //return if initial image not loaded
   var imgElem = image._element; //reference to actual image element
   imgElem.src = imgUrl; //set image source
   imgElem.onload = () => canvas.renderAll(); //render on image load
}

canvas.on('mouse:down', function() {
   replaceImage('//lorempixel.com/200/200/');
});
canvas {
   border: 1px solid #dddddd;
   border-radius: 3px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

PS: apology for not giving that much explanation.

Upvotes: 2

Ecstabis
Ecstabis

Reputation: 454

You can do this much simpler. Don't see why you'd use an extra lib for something like this. I wrote something small in plain JS which hopefully helps you further.

document.getElementById("image").onclick = function(){
  document.getElementById("image").src = "http://lorempixel.com/400/400/";
};
<img id="image" src="http://lorempixel.com/400/400/">

Upvotes: 2

Related Questions