首页 >> Coding >> 内容页

前端JavaScript使用canvas压缩图片(resize)

 const img = new Image()
 const _this = this
 // 在前端进行图片压缩, 最大宽度 800 或 最大长度 1000
 img.onload = function () {
 const canvas = document.createElement('canvas')
 const ctx = canvas.getContext('2d')
 let newWidth = 800
 let newHeight = 1000

if (img.width > newWidth) {
newHeight = parseInt((newWidth / img.width) * img.height)
} else if (img.height > newHeight) {
newWidth = parseInt((newHeight / img.height) * img.width)
} else {
newWidth = img.width
newHeight = img.height
}

canvas.width = newWidth
canvas.height = newHeight
ctx.clearRect(0, 0, newWidth, newHeight)
ctx.drawImage(img, 0, 0, newWidth, newHeight)

// 上传图片 blob 二进制
canvas.toBlob(cvsrc => {
    apiUploadImage(cvsrc).then(res => {
        // 上传后处理
        })
    })
}

img.src = window.URL.createObjectURL(file)
return false