JavaScript）2枚の写真の一部を拡大して画質比較できるツールを作成。

ブラウザで、2枚の写真の一部を拡大して画質比較できるツールを作成してみた。

「画像の一部を拡大して別枠に表示する」以下のJavaScriptライブラリ「jquery.ImageExpansion.js」の改修版を使用。

【改修版】

【作成ツール】

スマホでは、正常動作しない。ある程度の大きさのディスプレイのPCでの利用を想定。

※ 写真が重たいので、表示に時間がかかる。

サンプル →　https://ok2nd.github.io/tool/photo/compare/sample1.html

サンプル →　https://ok2nd.github.io/tool/photo/compare/sample2.html

 jQueryと「jquery.ImageExpansion.js」の改修版を「jquery.ImageExpansion-multi.js」として読み込む。拡大率を計算してImageExpansion()をコールする部分を「image_expand.js」として読み込む。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.ImageExpansion-multi.js"></script>
<script src="js/image_expand.js"></script>

<style type="text/css">
#image_expansion1 {
	position: relative;
}
#image_expansion2 {
	position: relative;
}
.pan_image {
	float: left;
	border: 2px solid #FF00B6;
}
.pan_mouse {
	position: absolute;
	border: 2px solid #FF00B6;
	cursor: move;
}
</style>

<table>
<tr>
<td>
	<div id="image_expansion1">
		<div class="pan_mouse"></div>
	<img id="img1" src="img/xxx.jpg">
		<div class="pan_image"></div>
	</div>
</td>
<td>
	<div id="image_expansion2">
		<div class="pan_mouse"></div>
	<img id="img2" src="img/yyy.jpg">
		<div class="pan_image"></div>
	</div>
</td>
</tr>
</table>

<script type="text/javascript">
window.onload = function() {
	image_expand('#image_expansion1', 'img1');
	image_expand('#image_expansion2', 'img2');
}
</script>

【 image_expand.js 】

ディスプレイの解像度が「1920×1080」を想定して、表示される画像の大きさを調整している。

function image_expand(div, img) {
	var ih = document.getElementById(img).naturalHeight;
	var iw = document.getElementById(img).naturalWidth;
	if (ih > iw) {
		var pan = ih / 500;
		var drag = 180000 / ih;
	} else {
		var pan = iw / 600;
		var drag = 240000 / iw;
	}
	$(function() {
		$(div).ImageExpansion({
			'pan' : pan,	//倍率
			'drag' : drag	//ドラッグ枠の大きさ
		});
	});
}

任意のパソコンローカルの2つの写真/画像をドラッグ＆ドロップして比較するツールも作成。写真/画像はサーバー側に送られるわけではない。写真/画像サイズが小さいと正常動作しない。

→→→　https://ok2nd.github.io/tool/photo/compare/upload.html

<script type="text/javascript">
drag_drop('1');
drag_drop('2');
function drag_drop(no) {
	var image_expansion = document.getElementById('image_expansion'+no);
	image_expansion.addEventListener('dragover', function (e) {
		e.preventDefault();
		e.stopPropagation();
		e.dataTransfer.dropEffect = 'copy';
	});
	image_expansion.addEventListener('drop', function (e) {
		e.stopPropagation();
		e.preventDefault();
		const reader = new FileReader();
		reader.onload = function (e) {
			document.getElementById('img'+no).src = e.target.result;
			window.setTimeout( function() { image_expand('#image_expansion'+no, 'img'+no) }, 3 );
		}
		reader.readAsDataURL(e.dataTransfer.files[0]);
	});
}
</script>