忍者ブログ

ひつ(じのひよこが)プログラミングします。
HTML / CSS / JS で簡単なアプリを作ったりする際、困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたことを綴ります。
ネットワークやセキュリティなど、IT関連で興味のある分野にも触れたいと思っています。
★毎週土曜日と日曜日に更新予定です。

2020/07    06« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  »08

JavaScript でサーバ上にある画像のハッシュ値を計算する

少し苦労したので備忘。実際に作ってみたときのソースコード

const getPicture = (src) => {
	return new Promise((resolve, reject) => {
		let xhr = new XMLHttpRequest();
		xhr.open('GET', src, true);
		xhr.responseType = "blob";
		xhr.onload = (e) => {
			// 画像が取得が終わったらここに来る
			const fileName = src.slice(src.lastIndexOf("/") + 1);
			// jsSHA を使ってハッシュ値を計算する
			// jsSHA がないようならば警告を出して reject しちゃう
			if(! Boolean(jsSHA)) {
				const errorMessage = 'To calculate SHA256 value of the picture, jsSHA is required: https://github.com/Caligatio/jsSHA';
				console.warn(errorMessage );
				reject({ event:e, data: e.currentTarget.response, fileName: fileName, hash: '', error: errorMessage });
				return;
			}
			// onload イベントの currentTarget.response に画像データが入っている
			// これを arrayBuffer 関数で Array Buffer に変換
			e.currentTarget.response.arrayBuffer().then((arraybuffer) => {
				const sha = new jsSHA("SHA-256", 'ARRAYBUFFER');
				sha.update(arraybuffer);
				const hash = sha.getHash("HEX");
				resolve({ event:e, data: e.currentTarget.response, fileName: fileName, hash: hash });
				return;
			});
		};
		xhr.onerror = (e) => resolve(reject({ event:e, data: null, fileName: '', hash: '', error: 'error in getting picture process' }););
		xhr.onabort = (e) => resolve(reject({ event:e, data: null, fileName: '', hash: '', error: 'getting picture process is aborted' }););
		xhr.ontimeout = (e) => resolve(reject({ event:e, data: null, fileName: '', hash: '', error: 'getting picture process is timeout' }););
		xhr.send();
	});
};

// 実際には同一ドメインじゃないと無理なので注意
const pictureUrl = 'http://blog.cnobi.jp/v1/blog/user/dae47eb5ba97f522fac369dd34ed4c62/1453740726';
getPicture(pictureUrl).then((result) => {console.log(result.hash)});

L5 を blob じゃなくて array buffer にすればすぐに計算できるのでは?と思ったのだがなぜか値が少しだけ違っていてうまくハッシュ値を計算できなかった。この辺の事情もちゃんと調べようと思ったのだがよくわからず。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

最新コメント

最新トラックバック

プロフィール

HN:
ひよこ
性別:
非公開

P R