jQuery 画像の一部を切り抜きできるプラグイン【jCrop】 – 切り抜き（トリミング）画像の出力保存まで

どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 画像の一部を切り抜きできるプラグイン【jCrop】 – 切り抜き（トリミング）画像の出力保存まで】です。今回記事化する【jCrop】はアップロードした画像や特定の画像をトリミングする最も便利なプラグインの一つかと思います。設置も簡単でなおかつトリミング後の画像保存出力まで実装可能です。ユーザーに画像をトリミングさせる必要が有る際には使ってみてもいいかと思います。

実装方法

まずは【jCrop】からプラグインファイルをダウンロードする必要があります。その後以下のようにCSSファイルとJSファイルを事前に読み込ませます。

事前読み込み

<link href=’css/jquery.Jcrop.min.css’ rel=’stylesheet’ type=’text/css’>
<script type="text/javascript" src="js/jquery.1.X.X.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>

次に切り抜き対象である画像を設置し、プラグインを動かす為のjQueryもあわせて記述しましょう。以下のHTMLではトリミングの挙動だけ実現されます。

HTML

<script language="Javascript">
    $(function(){$(‘#jcrop_target’).Jcrop();});
</script>
<img src="img/img.jpg" id="jcrop_target">

これで切り抜きさせるだけは実装完了です。ただこれだけだとシンプルすぎるので【jCrop】のデモにもあるようなサムネイル表示の実装方法もメモしておきます。ここではサムネイル用にCSSの調整が必要になります。

サムネイル機能

HTML

<img src="img/img.jpg" id="jcrop_target">
<div id="thumb">
    <img src="img/img.jpg" id="preview">
</div><!– サムネイル –>

CSS

#thumb{
    width:100px;
    height:100px;
    overflow:hidden;
}

JS

$(function(){
    $(‘#jcrop_target’).Jcrop({
        aspectRatio: 1,
        onSelect: showPreview,
        onChange: showPreview
    });
});
function showPreview(coords){
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;
    $(‘#preview’).css({
        width: Math.round(rx * 500) + ‘px’,
        height: Math.round(ry * 370) + ‘px’,
        marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,
        marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’
    });
}

トリミング画像の出力保存

上記でサムネイルの出力が完了しましたので最後にサムネイルした画像を出力保存してみます。トリミング対象のX座標,Y座標,高さ,横幅をPOSTさせPHP側で出力保存を実装します。ちなみにさらっと流しているのですがonChange,onSelect部分で選択範囲作成のタイミングで何を動かすかが指定できます。選択範囲のデザインに関してもいくつか指定できますので詳しくはダウンロードファイルをご確認ください。

HTML

<img src="img/img.jpg" id="jcrop_target">
<div id="thumb">
    <img src="img/img.jpg" id="preview">
</div><!– サムネイル –>
<form action="jcrop_load.php" method="post" onsubmit="return checkCoords();">
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="submit" value="SUBMIT" />
</form>

JS

$(function(){
    $(‘#jcrop_target’).Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords,
        onChange: showPreview
    });
});
function updateCoords(c){
    $(‘#x’).val(c.x);
    $(‘#y’).val(c.y);
    $(‘#w’).val(c.w);
    $(‘#h’).val(c.h);
};
function checkCoords(){
    if (parseInt($(‘#w’).val())) return true;
    return false;
};
function showPreview(coords){
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;
    $(‘#preview’).css({
        width: Math.round(rx * 500) + ‘px’,
        height: Math.round(ry * 370) + ‘px’,
        marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,
        marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’
    });
}

phpサイドの記述に関しては【Live Demo Tutorial】をご確認ください。出力に関しては【imagecopyresampled】をご参照頂けましたら幸いです。対象ファイル及び保存先の指定、画質等追加編集すればトリミング後保存→出力まで最短距離で実装可能です。

以上になります。