[jQuery]Jcrop

Jcrop(github) 是一個裁切圖片介面的 jQuery plugin.

安裝
可以直接下載檔案或透過 bower 安裝

bower install Jcrop

使用範例
HTML

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/jcrop/js/jquery.Jcrop.min.js"></script>
<img class="crop-img" src="test.jpg">

javascript

$(function () {
    $('.crop-img').Jcrop({
        onChange: showCoords,
        onSelect: showCoords,
        onRelease: clearCoords,
        aspectRatio: 1
    });

    var showCoords = function(c) {
        // 圖片縮放比例()
        var narrow_ratio = 1;       

        // 座標
        var crop_x1 = c.x * narrow_ratio;
        var crop_y1 = c.y * narrow_ratio;
        var crop_x2 = c.x2 * narrow_ratio;
        var crop_y2 = c.y2 * narrow_ratio;
        var crop_w = c.w * narrow_ratio;
        var crop_h = c.h * narrow_ratio;

        // 確認不會超出原圖大小
        crop_w = (crop_w > src_w) ? src_w : crop_w;
        crop_h = (crop_h > src_h) ? src_h : crop_h;

        if (crop_w !== crop_h && crop_h > crop_w) {
            crop_h = crop_w;
        } else if (crop_w !== crop_h && crop_w > crop_h) {
            crop_w = crop_h;
        }

        // Do Something
    };

    var clearCoords = function() {
        // Clear
    };
});