前端图片编辑插件_一款功能强大的图片裁剪插件Cropper.js

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

Cropper.js官网一览

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

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

安装方法：

npm安装

npm install cropperjs

文件导入

使用方法：

new Cropper(element[, options])

举个例子：

HTML文件中

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库。有兴趣的朋友可以关注我或者点赞我，多谢。