export function CompressPictures(file, quality = 0.2) {
return new Promise((resolve) => {
const reader = new FileReader() // 创建 FileReader
reader.onload = ({
target: {
result: src
}
}) => {
const image = new Image() // 创建 img 元素
image.onload = async() => {
const canvas = document.createElement('canvas') // 创建 canvas 元素
canvas.width = image.width
canvas.height = image.height
canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height) // 绘制 canvas
const canvasURL = canvas.toDataURL('image/jpeg', quality)
const buffer = atob(canvasURL.split(',')[1])
let length = buffer.length
const bufferArray = new Uint8Array(new ArrayBuffer(length))
while(length--) {
bufferArray[length] = buffer.charCodeAt(length)
}
const miniFile = new File([bufferArray], file.name, {
type: 'image/jpeg'
})
resolve({
file: miniFile,
origin: file,
beforeSrc: src,
afterSrc: canvasURL,
beforeKB: Number((file.size / 1024).toFixed(2)),
afterKB: Number((miniFile.size / 1024).toFixed(2))
})
}
image.src = src
}
reader.readAsDataURL(file)
})
}
使用示例
// 开挖前图片
async beforeImgHandleChange(file) {
const isIMG = ["image/jpeg", "image/jpg", "image/png"].includes(file.raw.type)
const isLt1M = file.size / 1024 / 1024 < 10
if (isIMG && isLt1M) {
let res = await CompressPictures(file.raw, 0.2)
let base64 = await this.getBase64(res.file)
this.beforeExcavationImgUrl = base64
this.form.beforeExcavationImgUrl = res.file
} else {
this.$message.warning('只能上传jpg跟jpeg类型图片,且大小不超过10M')
return
}
},
引用自https://blog.csdn.net/u013938578/article/details/128762512