ブラウザで、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>
