2つの写真/画像を横に並べて比較したい時がある。似たような写真でどちらが良いかを確認したい時など。
画像を横に並べて比較できるツールはあるが、似たような写真がたくさんある場合、比較相手をとっかえひっかえしながら比べたい場合に使いやすいツールがみつからない。
比較相手をフォルダーから選びながら、ドラッグ&ドロップで写真を入れ替えて比べられるツールを作った。HTML+JavaScriptで作成したのでブラウザ上で使える。ブラウザの画面に写真/画像をドラッグ&ドロップするだけで良い。
作成したツールのURLは以下。写真/画像はサーバー側に送られるわけではないので、インターネット上でも安心して使える。(古いブラウザでは動作しない。)
https://ok2nd.github.io/tool/view2/
写真/画像を画面上にドラッグ&ドロップすると、以下のような感じで写真が並ぶ。ファイル名も併せて表示するようにした。
左右それぞれ別の写真/画像をドラッグ&ドロップすれば入れ替わる。
このツールを作成しようと思ったきっかけは、GIMPで写真をアート加工して、似た画像がたくさん出来上がったため。
HTML、CSS、JavaScriptは以下。
<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>