一款功能强大的图片裁剪插件Cropper.js

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

Cropper.js官网一览

官网地址：https://fengyuanchen.github.io/cropperjs/

Github地址：https://github.com/fengyuanchen/cropperjs

安装方法：

npm安装

<code>npm install cropperjs/<code>

文件导入

<code><link>
/<code>

使用方法：

<code>new Cropper(element[, options])/<code>

举个例子：

HTML文件中

<code>

   

/<code>

CSS文件中

<code>/* 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%;
}/<code>

Js文件中

<code>// 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);
  },
});/<code>

更多例子请参考官网

插件使用举例

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

閱讀更多 程序猿有話說 的文章

關鍵字: 软件 HTML 功能强大