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

cropper.js 图片裁切插件

最新推荐文章于 2024-03-24 09:36:50 发布

weixin_30933531

最新推荐文章于 2024-03-24 09:36:50 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/H5C3XXN/p/6275758.html

本文介绍了一个依赖于jQuery的前端图片裁切插件cropper.js。该插件能够实现在前端进行图片裁剪，并将裁剪的数据传递给后端进行处理。文章详细介绍了如何安装和使用该插件。

　　给大家介绍一个前端非常实用的依赖于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中构建一些标签,所以在图片展示的时候多注意: