CODEWITHSUNDEEP
jqueryimageeventscanvasfabricjs
holyredbeard
holyredbeard

Reputation: 21198

Img src changes but not the actual image

I'm changing image by clicking on a button. I can see in the src code that the image is changed, but the actual image isn't changing in the browser. How come, and how to solve it?

// AvatarGenerator.eyes = 1;

moveRightBtn.on('click', function(){
    var newImage = 'eyes' + (AvatarGenerator.eyes + 1) + '.png';

    $('#eyesImg').attr('src','img/' + newImage);
});

EDIT: I created a jsFiddle that actually works, but the thing is that I'm using fabric.js (a canvas framework), which may be the reason for it's not working even thought I can't understand why. :(

Upvotes: 0

Views: 595

Answers (1)

apsillers
apsillers

Reputation: 115920

Your fabric.js code:

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

var imgInstance = new fabric.Image(imgElement, {
    left: 100,
    top: 100,
    angle: 30,
    opacity: 0.85
});

canvas.add(imgInstance);

"stamps" a visual copy of the image onto the canvas. The canvas doesn't hold any kind of reference of the original image element, because a canvas is just a dumb grid of pixels. Canvases don't know anything about what they represent, they just hold pixel data.

Thus, when the original image element that was used for the "stamp" changes, there's no reason for the "imprint" pixels on the canvas to change. Instead, you need to re-run your fabric.js code to stamp new pixels onto the canvas.

Upvotes: 2

Related Questions