html5移动端上传图片裁剪,Html5移动端上传图片并裁剪 - Clipic.js

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

Github地址

使用方法

支持npm方式

$ npm install clipic

支持cdn 引入

在vue项目中使用

// xxx.vue

import Clipic from 'clipic'

const clipic = new Clipic()

export default {

data () {

return {

base64: ''

}

}

methods: {

uploadImg(event) {

const files = event.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.value = ''

}

}

}

普通项目的使用可以看作者的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 (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本