Clipic.js插件可以為移動端(僅支持移動端)提供頭像上傳并裁剪成指定尺寸，用原生js開發(fā)的，輕量級，包含html跟css，不到8kb。點此鏈接體驗：https://teojs.github.io/clipic/
Github地址
https://github.com/teojs/clipic
使用方法
支持npm方式
$ npm install clipic
支持cdn 引入
<script src=“[https://unpkg.com/clipic/dist/clipic.min.js](https://unpkg.com/clipic/dist/clipic.min.js)”></script>
在vue項目中使用
<template>
<img :src="base64" />
<input type="file" name="file" accept="image/*" @change="uploadImg" />
</template>
<script>
import Clipic from 'clipic'
const clipic = new Clipic()
export default {
data () {
return {
base64: ''
}
}
methods: {
uploadImg(event) {
const files = event.target.files
const reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = img => {
clipic.getImage({
width: 500,
height: 400,
src: img.target.result,
onDone: base64 => {
this.base64 = base64
}
})
}
event.target.value = '' //重置文件選擇器
}
}
}
</script>
普通項目的使用可以看作者的demo
參數(shù)說明
width:Number (默認：500) – 裁剪寬度
height:Number (默認：500) – 裁剪高度
ratio:Number (可選) – 裁剪的比例，當傳入ratio時width/height將無效
src:String (必傳) – 需要裁剪的圖片，可以是圖片鏈接，或者 base64
type:String (默認：jpeg) – 裁剪后圖片的類型，僅支持 jpeg/png 兩種
quality:Number (默認：0.9) – 壓縮質(zhì)量
buttonText:Array (默認：[‘取消’, ‘重置’, ‘完成’]) – 底部三個按鈕文本
