Загрузите один и тот же файл изображения дважды - Javascript

Question

У меня есть приложение для загрузки изображений в моем приложении для рисования, которое я написал в Javascript. Я хочу разрешить пользователю размещать на холсте несколько одинаковых изображений. Однако, когда я пытаюсь загрузить изображение, которое уже находится на холсте, ничего не происходит, и точка останова в моем обработчике событий для загрузчика никогда не попадает. Что происходит и как я могу это исправить? Благодаря!

Вот код для моего обработчика изображений:

function handleImage(e) { 
var reader = new FileReader(); 
reader.onload = function(event) { 
    var img = new Image(); 
    img.onload = function() { 
    img.className = 'drag'; 
    img.style.left = 0; 
    img.style.top = 0; 
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10)); 
    images.push(img); 
    } 
    img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]); 
}; 

Answer 1

Я склонен согласиться с Рене Горшок использовать то же самое изображение снова (кнопка дублирует), но вы до сих пор не может помешать пользователю вставки/снова загрузите одно и то же изображение. Я столкнулся с проблемой некоторое время назад и использовал этот бит кода для проверки того, что изображение уже кэшировано (если кэшировано, нет загрузки, следовательно, onload также не будет срабатывать).

var img = new Image(); 
img.src = event.target.result; 

var insertImage = function() { 
    img.className = 'drag'; 
    img.style.left = 0; 
    img.style.top = 0; 
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10)); 
    images.push(img); 
    } 

if(img.complete){ 
    img.onload = insertImage; 
} else { 
    insertImage(); 
} 

Надеюсь, что это поможет.