jquery.cropbox.jsを使って超簡単に画像をトリミングしてダウンロードする方法｜DAD UNION

jquery.cropbox.jsを使って超簡単に画像をトリミングしてダウンロードする方法をご紹介します。

Contents

jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするCSSの記述
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするJavaScriptの記述
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードするHTMLの記述
jquery.cropbox.jsを使って簡単に画像をトリミングしてダウンロードできるデモページ
ソース元：jquery-cropbox

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>