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

Question

[d'Ivan]

Когда бросаю изображения в области 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

Comments

[Роман]

Роман Мирр, всего 1 раз сумел поймать ситуацию, когда хэш не посчитался. Очень трудно судить о причинах, почему это происходит. Возможно браузер не успевает отрабатывать создание канваса и работу в нем (хоть в функции pHash и нет ни одного вызова ассинхронных функций, но других причин просто не вижу). Не могли бы вы рассказать зачем вам нужен хэш изображения? Может проще и быстрее посчитать хэш из исходных данных reader.result?

[d'Ivan]

Роман, У меня чаще вычисляется как 0, чем как полагается. Как мелкие изображения, так и крупные.
Браузер Файрфокс. Мне нужно вычислить перцептивный хэш, а не обычный из таких как MD5, SHA-1 и пр.
Может, ассинхронное чтение происходит именно в reader.result, я не знаю.

[Роман]

Роман Мирр, у меня тоже firefox, точно не уверен, но мне кажется что асинхронность возникает где то во внутренних механизмах:
1. либо вовремя загрузки изображения (проверить можно выведя reader.result.length, и посмотрев есть ли разница между величинами при успехе генерации хэша и неуспехе)
2. либо при инициализации канваса и его добавлении на страницу (как проверить не знаю, надо смотреть состояние какого либо из свойств канваса, при этом если выводить в консоль любой объект, это ничего не даст, так как при изменении объекта который изменяется далее по коду изменится и его вывод в консоль, например если перед вызовом pHash вставить строчку console.log(img); и если раскрыть выведенный в консоль объект img мы увидим что у него есть свойство hash инициализированное далее по коду. Чтобы избежать этого эффекта надо выводить что то простое (какое то свойство), для 100% гарантии я бы вывел даже не само свойство а его копию ну например не reader.result.length а ""+reader.result.length :)
3. либо при вставке на канвас изображения (так же не представляю как проверить :)

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

Answer 1

[d'Ivan]

Необходимо было дождаться события окончания загрузки изображения перед его обработкой:

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);
    }

Answer 2

[tzlom]

Дождись загрузки изображения в Image перед вычислением хеша

Comments

[d'Ivan]

Помоги кодом, пожалуйста.