移动端上传头像并裁剪 - Clipic.js

Clipic.js

Clipic.js插件可以为移动端提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。先上一张效果图，或者点此链接体验：https://teojs.github.io/clipic/

例图

Github地址

https://github.com/teojs/clipic

使用方法

支持 npm 方式

$ npm install clipic

支持 cdn 引入

在vue项目中使用

// xxx.vue

普通项目的使用可以看作者的demo

参数说明

• width:Number (默认：500) -- 裁剪宽度
• height:Number (默认：500) -- 裁剪高度
• ratio:Number (可选) -- 裁剪的比例，当传入ratio时width/height将无效
• src:String (必传) -- 需要裁剪的图片，可以是图片链接，或者 base64
• type:String (默认：jpeg) -- 裁剪后图片的类型，仅支持 jpeg/png 两种
• quality:Number (默认：0.9) -- 压缩质量
• buttonText:Array (默认：['取消', '重置', '完成']) -- 底部三个按钮文本

来自-码农的日常