jquery.cropbox.jsを使って超簡単に画像をトリミングしてダウンロードする方法をご紹介します。
Contents
ディスプレイ広告
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするCSSの記述
※jquery.cropbox.cssファイルを読み込みます。その他必要に応じて変更して下さい。
<link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding-top: 20px; } p{ line-height: 1.6em; } .results { font-family : monospace; font-size : 20px; } .download a{ font-size: 18px; font-weight: bold; } </style>
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするJavaScriptの記述
※jquery.min.js、hammer.js、jquery.mousewheel.js、jquery.cropbox.jsファイルを読み込みます。$(‘トリミング画像エリア’).cropbox({画像サイズ等のオプション}).on(‘cropbox’, function(パラメータ) {トリミング画像サイズ等を指定})を記述します。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="hammer.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript" src="jquery.cropbox.js"></script> <script type="text/javascript" defer> $( function () { $( '.cropimage' ).each( function () { var image = $(this), cropwidth = image.attr('cropwidth'), cropheight = image.attr('cropheight'), results = image.next('.results' ), x = $('.cropX', results), y = $('.cropY', results), w = $('.cropW', results), h = $('.cropH', results), download = results.next('.download').find('a'); image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } ) .on('cropbox', function( event, results, img ) { x.text( results.cropX ); y.text( results.cropY ); w.text( results.cropW ); h.text( results.cropH ); download.attr('href', img.getDataURL()); }); } ); } ); </script>
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするHTMLの記述
※トリミングする画像(img.jpg)class=”cropimage”を用意し、トリミング後の画像をダウンロードするリンクタグにdownload=”crop.png”を記述します。
<h1>jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードできます。</h1> <p>画像をマウスオーバーすると下に「-」「+」が表示されるので拡大・縮小してみてください。<br>画像ドラッグでトリミングしたい位置に移動して「トリミング画像をダウンロード↓」リンクをクリックしてみてください。</p> <br> <img class="cropimage" alt="" src="img.jpg" cropwidth="200" cropheight="200"/> <div class="results"> <b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span> </div> <div class="download"> <a href="#" download="crop.png">トリミング画像をダウンロード↓</a> </div> <br><br> <img class="cropimage" alt="" src="img.jpg" cropwidth="300" cropheight="200"/> <div class="results"> <b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span> </div> <div class="download"> <a href="#" download="crop.png">トリミング画像をダウンロード↓</a> </div> <br>
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードできるデモページ
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードできるデモページ
ソース元:jquery-cropbox
jquery-cropbox
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。