60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
|
/**
|
|||
|
|
* 压缩图片到指定大小
|
|||
|
|
* @param baseImg base64图片
|
|||
|
|
* @param maxSize 单位kb
|
|||
|
|
*/
|
|||
|
|
export function compressImgBySize(baseImg, maxSize = 200) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
// 计算图片大小
|
|||
|
|
const strLength = baseImg.length
|
|||
|
|
const fileLength = parseInt(strLength - (strLength / 8) * 2)
|
|||
|
|
let size = parseInt((fileLength / 1024).toFixed(2))
|
|||
|
|
|
|||
|
|
// 判断图片是否符合指定大小要求
|
|||
|
|
if (size <= maxSize) {
|
|||
|
|
resolve(baseImg)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建image对象
|
|||
|
|
const img = new Image()
|
|||
|
|
if (baseImg.indexOf('data:image/') !== -1) {
|
|||
|
|
img.src = baseImg
|
|||
|
|
} else {
|
|||
|
|
img.src = 'data:image/jpeg;base64,' + baseImg
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
img.onload = () => {
|
|||
|
|
// 把image对象 转换为 canvas对象
|
|||
|
|
const canvas = imgToCanvas(img)
|
|||
|
|
let resUrl = ''
|
|||
|
|
// 图片质量，范围：0 ~ 1
|
|||
|
|
let quality = 0.9
|
|||
|
|
|
|||
|
|
// 当图片大小大于指定maxSize，图片质量大于0时继续通过降低图片资料来压缩
|
|||
|
|
while (size > maxSize && quality > 0) {
|
|||
|
|
// 在canvas上绘制该HTMLImageElement，得到图片base64
|
|||
|
|
resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
|
|||
|
|
const resLength = resUrl.length
|
|||
|
|
// 计算绘制出的base64图片大小
|
|||
|
|
const resFileLength = parseInt(resLength - (resLength / 8) * 2)
|
|||
|
|
size = parseInt((resFileLength / 1024).toFixed(2))
|
|||
|
|
// 降低图片质量
|
|||
|
|
quality = (quality - 0.1).toFixed(1)
|
|||
|
|
}
|
|||
|
|
resolve(resUrl)
|
|||
|
|
}
|
|||
|
|
img.onerror = () => {
|
|||
|
|
resolve(baseImg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 把image 转换为 canvas对象
|
|||
|
|
export function imgToCanvas(image) {
|
|||
|
|
var canvas = document.createElement('canvas')
|
|||
|
|
canvas.width = image.width
|
|||
|
|
canvas.height = image.height
|
|||
|
|
canvas.getContext('2d').drawImage(image, 0, 0)
|
|||
|
|
return canvas
|
|||
|
|
}
|