图像裁剪是前端开发中的常用功能。比如上传头像或者logo的时候，如果大小不合适，就需要裁剪。如果提供了在线裁剪功能，用户就不需要使用其他软件(如Photoshop)来编辑图片。这样用户体验会有很大提升。今天给大家介绍一个图片裁剪插件Cropper.js这个插件功能强大，可以满足你在项目中的需求。
Cropper.js官网列表
官方网站地址：https://fengyuanchen.github.io/cropperjs/
Github地址：https://github.com/fengyuanchen/cropperjs
安装方法：
Npm安装
npinstall cropper js文件的导入
href=’/path/to/cropper . CSS ‘ rel=’ style sheet ‘ scriptsrc=’/path/to/cropper . js ‘/脚本用法：
以新裁剪器(元素[，选项])为例：
在HTML文件中
！-用块元素(容器)包装图像或画布元素-div img id=’ image ‘ src=’ picture . jpg ‘/div CSS文件
/*确保图像的大小完全适合容器*/img { display : block；/*这个规则很重要，请不要忽略这个*/max-width : 100%；}Js文件
//导入“cropper js/dist/cropper . CSS”；从“cropperjs”导入裁剪器；const image=document . getelementbyid(‘ image ‘)；const cropper=new Cropper(image，{ aspectatio : 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)；},});更多例子请参考官网。
插件使用示例
这个插件最大的特点就是功能全面，文档详细，使用方便。只需配置选项。感兴趣的朋友可以下载试试。我会在以后的文章中继续介绍有趣的前端插件或者css库。感兴趣的朋友可以关注我或者赞我，谢谢。
