[Javascript] 介紹一個好用的裁切圖片的套件，並取得裁切後的大小

贊助區

itCoin:

3ExcHdua3crim67XdnGhTVMq6hTRawgkCu

Ethereum:

0xb1f6c1880c058a4b7d1ee06d325411c1c1de3573

Crypto.com(虛擬貨幣入門選擇，用我連結註冊馬上送 $25美金)

派網 (網格交易第一選擇，新手必推)

幣安 Binance (第一名交易所，點擊註冊，送獎勵)

ByBit (體驗最好的交易所，點擊註冊送獎勵)

幣託 BitoPro (台灣虛擬貨幣換成台幣必備，點擊註冊) :

數字貨幣貪婪恐慌指數

2016-08-16

最近專案需求要用到裁切圖片，網路上很多根據 Eleven Hsiao 推薦一套很簡單的套件 - Croppie ( https://github.com/foliotek/croppie )

使用方法也很簡單

1.引用 Javascript and CSS

<link href="croppie.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="croppie.min.js"></script>

2. 設定 HTML Element

    <!--  編輯用的-->

    <div class="demo"></div>

    <!-- 放結果的 -->

    <img id="imgResult" />

3. Init Croppie

<script>

    $('.demo').croppie({

        // url 為圖片位置

        url: 'sh098.jpg'

});

</script>

成功呼叫後即可以看到

4. 取得裁切後圖片，這邊我是轉為base64 後放入 imgResult 的 img element

$('#btn1').click(function () {

    $('.demo').croppie('result', {

        type: 'canvas',

        size: 'original'

    }).then(function (resp) {

        $('#imgResult').attr('src', resp);

});

});

5. 取得裁切後的圖片大小

$('#btn2').click(function () {

    var image = new Image();

    image.onload = function () {

        alert(image.width + "," + image.height);

};

    image.src = $('#imgResult').attr('src');

});

Sample: