h5-vue-croppers

组件内使用

npm install h5-vue-croppers 

import  Avator  from 'h5-vue-croppers' 
components: {
  Avator,
}

使用示例

<template>
    <div>
        <input
            type="file"
            @change="avatorChange"
        >
        <Avator
            v-if="state"
            :url="imageUrl"
            :name="fileName"
            :autoCrop="true"
            :centerBox="true"
            @cancel="cancelAvatorChoose"
            @upload="getCropData"
            />
    </div>
</template>

<script>
    import  Avator  from 'h5-vue-croppers' 
    export default {
    components: {
     Avator,
    },
    data() {
        return {
        imageUrl: '',
        state: false,
        fileName: ''
        }
    },
    methods: {
        getCropData(files) {
            console.log(files)//裁剪之后返回的文件流，用于上传服务器
        },
        avatorChange(e) {
            const file = e.srcElement.files[0]
            const imgURL = window.URL.createObjectURL(file)//处理input返回的file对象，得到一个图片的url传给裁剪组件
            this.imageUrl = imgURL
            this.fileName = file.name
            this.state = true
        },
        cancelAvatorChoose() {
            this.imageUrl = ''
            this.state = false
        },
    }
}
</script>

文档

名称	功能	默认值	可选值
url	裁剪图片的地址	空	url 地址 || base64 || blob
name	input返回的file对象里的name	空
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
info	裁剪框的大小信息	true	true || false
canScale	图片是否允许滚轮缩放	true	true || false
autoCrop	是否默认生成截图框	false	true || false
autoCropWidth	默认生成截图框宽度	200px	0~max
autoCropHeight	默认生成截图框高度	200px	0~max
fixed	是否开启截图框宽高固定比例	true	true | false
fixedNumber	截图框的宽高比例	[1, 1]	[宽度, 高度]
full	是否输出原图比例的截图	false	true | false
fixedBox	固定截图框大小 不允许改变	false	true | false
canMove	上传图片是否可以移动	true	true | false
canMoveBox	截图框能否拖动	true	true | false
original	上传图片按照原始比例渲染	false	true | false
centerBox	截图框是否被限制在图片里面	false	true | false
high	是否按照设备的dpr 输出等比例图片	true	true | false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
maxImgSize	限制图片最大宽度和高度	2000	0-max
enlarge	图片根据截图框输出比例倍数	1	0-max(建议不要太大)
mode	图片默认渲染方式	contain	contain , cover, 100px, 100% auto

日志

#1.0.6 测试

#1.0.5 文档维护