前端裁切图片插件之cropper介绍

Posted 奋斗的小小牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端裁切图片插件之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中构建一些标签,所以在图片展示的时候多注意:

  

  

 

以上是关于前端裁切图片插件之cropper介绍的主要内容,如果未能解决你的问题,请参考以下文章

插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

jQuery插件分享Cropper——一个简单方便的图片裁剪插件

图片裁切插件jCrop的使用心得

图片裁切插件jCrop的使用心得

Vue项目中使用图片裁切器 cropperjs (头像裁切)

基于cropper和sweetalert的简单图片/头像裁剪上传