前端裁切圖片插件之cropper介紹

　　給大家介紹一個前端非常實用的依賴於jquery的圖片裁切插件cropper.

　　因為前端無法做到圖片的裁切,所以實際中需要用cropper和后台的GraphicsMagick相互配合.

　　先貼上cropper的網址https://fengyuanchen.github.io/cropperjs/和github地址:https://github.com/fengyuanchen/cropper　

　　第一步:下載cropper:

　　

npm install cropper.

　　第二部:引入依賴包和插件包:

　　

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

　　第三部:在js中調用方法:

$('#image').cropper({
  aspectRatio: 16 / 9,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

　　其中aspectRatio 是指圖片的長寬比

　　只需要將x,y,width,height,rotate,scaleX,scaleY這些數據傳給后台,后台就可以根據數據進行圖片的裁切.

　　使用cropper要注意一點,這個插件會在dom中構建一些標簽,所以在圖片展示的時候多注意: