Как исправить вычисление хэша изображения при операции drag&drop?

Когда бросаю изображения в области drag&drop, вычисляется хэш изображения, но по какой-то причине он работает как-то странно: то вычисляет его как 0, то верно. Причем, на одном и том же изображении.
Есть подозрение, что это связано с асинхронным чтением в FileReader.
код
var images = [];
let drop_el = document.getElementById('drop-area');

drop_el.ondragover = function () { this.className = 'hover'; return false; };
drop_el.ondragend = function () { this.className = ''; return false; };

drop_el.ondrop = function (e) {
	this.className = '';
	e.preventDefault();

	images = [];

	for (let file of e.dataTransfer.files) {
		load_file(file);
		console.debug(file);
	}

  return false;
};

function load_file(file) {
	var reader = new FileReader();
	reader.onload = function (event) {
		var img = new Image()
		img.src = reader.result;
		var hash = pHash(img);
		var hash_hex = parseInt(hash, 2).toString(16);
		img.hash = hash;
		img.hash_hex = hash_hex;

		document.body.appendChild(img);
		images.push(img);
	};
	reader.readAsDataURL(file);
}

Вот здесь полный пример: https://codepen.io/romiras/pen/bJKVGY
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
2ord
@2ord Автор вопроса
Необходимо было дождаться события окончания загрузки изображения перед его обработкой:
img.onload = function () {
      var hash = pHash(img);
      var hash_hex = parseInt(hash, 2).toString(16);
      img.hash = hash;
      img.hash_hex = hash_hex;

      document.body.appendChild(img);

      images.push(img);
    }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
tzlom
@tzlom
Дождись загрузки изображения в Image перед вычислением хеша
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы