/**
|
* @description: 图片压缩
|
* @param {*} src 图片地址
|
* @param {*} quality 压缩质量
|
* @param {*} maxWidth 最大宽度
|
* @param {*} callback 回调函数
|
* @return {*}
|
*/
|
function compressImage(src, quality, maxWidth, callback) {
|
const img = new Image()
|
img.setAttribute('crossOrigin', 'Anonymous')
|
img.onload = function () {
|
const canvas = document.createElement('canvas')
|
const ctx = canvas.getContext('2d')
|
let width = img.width
|
let height = img.height
|
|
if (width > maxWidth) {
|
height *= maxWidth / width
|
width = maxWidth
|
}
|
|
canvas.width = width
|
canvas.height = height
|
ctx.drawImage(img, 0, 0, width, height)
|
|
const newData = canvas.toDataURL('image/jpeg', quality)
|
// 使用atob()将base64转换为二进制字符串
|
const binaryString = window.atob(newData.split(',')[1])
|
const mimeString = newData.split(',')[0].split(':')[1].split(';')[0]
|
// 创建Blob对象
|
const array = []
|
for (let i = 0; i < binaryString.length; i++) {
|
array.push(binaryString.charCodeAt(i))
|
}
|
const blob = new Blob([new Uint8Array(array)], { type: mimeString })
|
|
callback(blob)
|
}
|
img.src = src
|
|
return src
|
}
|
|
export default function imageCompress(src, quality, maxWidth) {
|
// 使用例子
|
return compressImage(src, quality, maxWidth, function (blob) {
|
// 创建一个新的图片URL
|
const imageUrl = URL.createObjectURL(blob)
|
// 可以在这里使用imageUrl，比如设置为img元素的src
|
// document.getElementById('your-image-element').src = imageUrl;
|
// 当不需要这个URL的时候，释放它
|
URL.revokeObjectURL(imageUrl)
|
})
|
}
|
