晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

HTML+JavaScript)パソコンローカルの2つの写真/画像をドラッグ&ドロップして横並びに表示して比較するツール

2つの写真/画像を横に並べて比較したい時がある。似たような写真でどちらが良いかを確認したい時など。

画像を横に並べて比較できるツールはあるが、似たような写真がたくさんある場合、比較相手をとっかえひっかえしながら比べたい場合に使いやすいツールがみつからない。

比較相手をフォルダーから選びながら、ドラッグ&ドロップで写真を入れ替えて比べられるツールを作った。HTML+JavaScriptで作成したのでブラウザ上で使える。ブラウザの画面に写真/画像をドラッグ&ドロップするだけで良い。

作成したツールのURLは以下。写真/画像はサーバー側に送られるわけではないので、インターネット上でも安心して使える。(古いブラウザでは動作しない。)

https://ok2nd.sakura.ne.jp/tool/view2/

f:id:art2nd:20190727160628j:plain

写真/画像を画面上にドラッグ&ドロップすると、以下のような感じで写真が並ぶ。ファイル名も併せて表示するようにした。

左右それぞれ別の写真/画像をドラッグ&ドロップすれば入れ替わる。

f:id:art2nd:20190727160638j:plain

このツールを作成しようと思ったきっかけは、GIMPで写真をアート加工して、似た画像がたくさん出来上がったため。

HTML、CSSJavaScriptは以下。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px
	vertical-align: top;
}
.box-row img {
	max-width: 100%;
	border: 1px solid #888;
}
</style>

<div class="box-row">
<div id="target1" style="margin-right:10px;"><p id="filename1"></p><img id="preview1" src="img/mes.jpg"></div>
<div id="target2"><p id="filename2"></p><img id="preview2" src="img/mes.jpg"></div>
</div>
<script>
drag_drop('1');
drag_drop('2');
function drag_drop(no) {
	var target = document.getElementById('target'+no);
	target.addEventListener('dragover', function (e) {
		e.preventDefault();
		e.stopPropagation();
		e.dataTransfer.dropEffect = 'copy';
	});
	target.addEventListener('drop', function (e) {
		e.stopPropagation();
		e.preventDefault();
		const reader = new FileReader();
		reader.onload = function (e) {
			document.getElementById('preview'+no).src = e.target.result;
		}
		reader.readAsDataURL(e.dataTransfer.files[0]);
		document.getElementById('filename'+no).innerHTML = e.dataTransfer.files[0].name;
	});
}
</script>