img src 更改但不是实际图像答案

【问题标题】：Img src changes but not the actual imageimg src 更改但不是实际图像
【发布时间】：2013-04-26 19:31:51
【问题描述】：

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

// AvatarGenerator.eyes = 1;

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

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

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

【问题讨论】：

你能为此创建一个 jsFiddle 吗？
任何与fabric.js有关的控制台错误？
不修改当前img的src，添加一个新的，删除当前的，然后将新的id更改为旧的，怎么样？像这样：var newImg = $('<img />',{id:'eyesImg2', src:'img/' + newImage}); $('#eyesImg').after(newImg).remove();$('#eyesImg2').attr('id','eyesImg');
@RaphaelDDL 不是添加和删除，而是使用方便的replaceWith jQuery 函数来替换元素。使您的建议更具可读性，无需使 id-stuff 过于复杂。
@RenéWolferink 太棒了。从来没有用过那个。谢谢你的建议。所以是的$('#eyesImg').replaceWith('<img id="eyesImg" src="img/' + newImage+'" />'); 小很多：P 欲了解更多信息，replaceWith()

标签： jquery image events canvas fabricjs

【解决方案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 代码以将新像素标记到画布上。

【讨论】：