移动端Vue下使用Cropper.js + 原生js实现图片裁剪异步上传功能

Cropper是一个同时支持PC端和移动的图片裁剪工具，这次公司业务需要，所以研究使用了一波，感觉很强大，下面是主流程步骤解析和部分业务源码

一、主要流程

1. input[type='file']获取图片 
2. 实例化new FileReader().readAsDataURL读取input图片，回调结果绑定给img标签显示图片
3. 调用Cropper实例传入两个参数第一个是img dom，第二个是可选配置参数(稍后介绍)
4. 确定裁剪 调用cropper.getCroppedCanvas().toBlob( blob => {}) 获取截图后的Blob对象
5. new File([blob]) 生成file对象
6. new FormData().append('file', file) 放入form表单
7. ajax form表单上传

二、分步代码解析

1.input[type='file']获取图片

2.实例化new FileReader().readAsDataURL读取input图片，回调结果绑定给corpperImg标签显示图片

[code]<input @change="getFile" class="input" type="file" ref="file1"
accept="image/jpg,image/jpeg,image/png,image/gif"/>

// 在inputchange事件时触发
getFile (e) {
const toast = Toast('图片读取中，请稍后...')
let _this = this
this.cropperImg = null
let files = e.target.files[0] // 获取图片原文件
if (!e || !window.FileReader) return // 看支持不支持FileReader
let reader = new FileReader()
reader.readAsDataURL(files)
reader.onloadend = function () {
_this.isShowCropper = true
_this.cropperImg = this.result // reader结果
_this.$refs.file1 && (_this.$refs.file1.value = '')// 清空value
}
}

3.调用cropper实例传入两个参数第一个是img dom，第二个是可选配置参数

[code]import Cropper from 'cropperjs'

const option = {
outputSize: 1, // 裁剪生成图片的质量
outputType: 'png', // 裁剪生成图片的格式
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
aspectRatio: 1, // 设置裁剪框的宽高比partnerMine
minContainerWidth: document.body.offsetWidth, // 容器宽
minContainerHeight: 300 // 容器高
}

// 实例化Cropper
this.cropper = new Cropper(this.$refs.cropperImg, option)

copper样式不对的地方记得做修改

4.确定裁剪

1. 调用cropper.getCroppedCanvas().toBlob( blob => {}) 获取截图后的blob对象
2. new File([blob]) 生成file对象
3. new FormData().append('file', file) 放入form表单
4. ajax上传

[code]// 这里调用cropper的方法获取截图blob
this.cropper.getCroppedCanvas().toBlob(async blob => {
const contentType = 'image/jpeg' // 文件类型

// 这里使用File构造函数生成文件，注意第二个参数，文件名一定要写全，包括文件类型
// 本文使用的是 .jpeg
// 第三个参数的type也要写上
const file = new File([blob], 'img.jpeg', {type: contentType, lastModified: Date.now()})

const formData = new FormData() // 构建form表单准备提交
formData.append('file', file)

const res = await axios('/upload', data: formData, 'POST') // axios异步上传
// 这里如果是$.ajax上传，记得参照ajax上传form表单的格式

alert(res.data) // 后端返回的文件地址
this.cropper.destroy() // 销毁cropper
})

官方demo链接：https://fengyuanchen.github.io/cropperjs/

参考链接：

Cropper.js https://github.com/fengyuanchen/cropperjs

MDN：https://developer.mozilla.org/zh-CN/

有什么问题欢迎在下方留言讨论~

• 点赞
• 收藏
• 分享
• 文章举报