Img src меняется, но не фактическое изображение

Question

Я меняю изображение, нажимая на кнопку. Я вижу в коде src, что изображение изменено, но фактическое изображение не меняется в браузере. Почему, и как его решить?

// AvatarGenerator.eyes = 1; 

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

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

EDIT: Я создал 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); 

«марка» а визуальной копия изображений на холст, холст не имеет какой-либо ссылки исходного элемента изображения, поскольку полотно просто тупой сетки пикселей. Полотна ничего не знают о, что они представляют, они просто хранят данные пикселя.

Таким образом, когда исходный элемент изображения, который был использован для изменения «штамп» , нет причин для «отпечатков» пикселей на холсте до cha Нге. Вместо этого вам нужно повторно запустить свой код fabric.js для печати новых пикселей на холсте.