- 获取文件
- 应用 cxt.drawImage 在 canvas 上画
- 利用 canvas.toDataURL 进行压缩
- 具体实现
function compress(file) {return new Promise((reslove, reject) => {
let afterResult = ''
const img = new Image()
getBase64(file).then(data => {img.src = data}).catch(error => console.log(error))
img.onload = function() {const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = this.width
canvas.height = this.height
/*
drawImage(img, sx, sy, swidth, sheight, x, y, width, height): 在画布上绘制图像或视频, img 为必填参数, 其余都为非必填
参数:img: 要绘制的图片或视频
sx: 开始裁剪的 x 坐标
sy: 开始裁剪的 y 坐标
swidth: 被裁剪图像的宽度
sheight: 被裁减图像的高度
x: 在画布上搁置的 x 坐标
y: 在画布上搁置的 y 坐标
width:要应用的图像的宽度(扩大 / 放大)height:要应用的图像的宽度(扩大 / 放大)*/
context.drawImage(before, 0, 0)
/* toDataURL(type, quailty): 返回一个蕴含图片展现的 url
参数: type: 图片格式,默认为 image/png
quailty: 当 type 为图片时,能够从 0 到 1 的区间内抉择图片的品质
*/
afterResult = canvas.toDataURL(file.type, 0.5)
reslove(afterResult)
}
img.onerror = function(err) {reject(err)
}
})
}