[Javascript] 介紹一個好用的裁切圖片的套件 ，並取得裁切後的大小
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:
source :https://www.dropbox.com/s/7jnbjonskd596e8/JQueryCropSample1.7z?dl=0