图片裁剪是前端开发中常用的功能，比如上传头像或者logo的时候，如果尺寸不合适，就需要裁剪一下。如果提供在线裁剪功能的话，用户就不需要利用其它软件（如：Photoshop）编辑图片了。这样，用户体验度就会大大提升。今天给大家介绍一款图片裁剪插件Cropper.js。这款插件功能强大，定能满足您在项目中的需求。

Cropper.js官网一览

官网地址：

https://fengyuanchen.github.io/cropperjs/

Github地址：

https://github.com/fengyuanchen/cropperjs

安装方法：

npm安装

npm install cropperjs

文件导入

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

使用方法：

new Cropper(element[, options])

举个例子：

HTML文件中

<!-- Wrap the image or canvas element with a block element (container) -->
<div><img id="image" src="picture.jpg">
</div>

CSS文件中

/* Ensure the size of the image fit the container perfectly */ 
img {
  display: block;

  /* This rule is very important, please don't ignore this */ 
  max-width: 100%;
}

Js文件中

// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

更多例子请参考官网

插件使用举例

这款插件最大的特点就是功能全面，文档也很详细，使用起来也很方便，配置一下options就可以了。有兴趣的朋友可以下载下来试一下。我将在今后的文章中继续介绍有趣的前端插件或者css库。有兴趣的朋友可以关注我或者点赞我，多谢。