jquery - img src 更改但不是实际图像

Question

我正在通过单击按钮更改图像。我可以在 src 代码中看到图像已更改，但实际图像在浏览器中没有更改。怎么来的，怎么解决？

// AvatarGenerator.eyes = 1;

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

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

编辑：我创建了一个实际工作的jsFiddle，但问题是我使用的是fabric.js（一个画布框架），这可能是它不工作的原因，即使我不明白为什么。:(

Answer 1

您的 fabric.js 代码：

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

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

canvas.add(imgInstance);

将图像的视觉副本“标记”到画布上。画布不包含原始图像元素的任何类型的引用，因为画布只是一个愚蠢的像素网格。画布不知道它们代表什么，它们只保存像素数据。

因此，当用于“印章”的原始图像元素发生变化时，画布上的“印记”像素没有理由发生变化。相反，您需要重新运行您的 fabric.js 代码以将新像素标记到画布上。