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

Img src更改但不是实际图像

1 个答案: