使用canvas压缩图片大小
分类: 解决问题 5148 10
目前的项目都有需要用到前端上传图片做压缩处理,结合canvas的toDataURL
可以即可做简单的处理,输出格式为base64,下边做了一个简单的封装
/**
* [imageCompress 图片压缩]
* @param {[Array]} imgSrc [传入图片地址]
* @param {Number} [width=1024] [图片需要压缩的宽度,单位:px]
* @param {Number} [quality=1] [图片需要压缩的质量,0~1之间]
* @return {[type]} [返回base64 jpeg格式图片]
*/
export function imageCompress (imgSrc, width = 1024, quality = 1) {
let imgList = []
imgSrc.map(v => {
let img = new Promise((resolve, reject) => {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let oImg = new window.Image()
oImg.src = v
oImg.onload = function () {
let height = width / (this.naturalWidth / this.naturalHeight)
// 如果压缩的宽度大于图片自身的宽度,采取图片自身的宽度
if (this.naturalWidth <= width) {
width = this.naturalWidth
height = this.naturalHeight
}
canvas.width = width
canvas.height = height
ctx.drawImage(this, 0, 0, width, height)
resolve(canvas.toDataURL('image/jpeg', quality))
}
})
imgList.push(img)
})
return Promise.all(imgList).then(res => Promise.resolve(res))
}
共 10 条评论关于 “使用canvas压缩图片大小”