前端canvas实现图片压缩及上传

以下案例：

包含本地图片上传及图片压缩

大致思路：

上传图片，读取图片信息及展示缩略图使用的是 FileRender，在图片加载完成后的onload处理函数中，使用canvas进行图片压缩，然后发给后台生成访问图片路径传给前端。

关于 canvas.toBlob 请看：https://blog.csdn.net/qq_42778001/article/details/106522594

<input type="file" id="file">
<div id="img-box"></div>
<canvas id="canvas"></canvas>
<script>
// 限制图片的最大宽度
const MAXWIDTH = 300
// 最大高度
const MAXHEIGHT = 300
let canvas = document.getElementById('canvas'),
    file = document.getElementById('file'),
    imgBox = document.getElementById('img-box');
let render = new FileReader();
let img = new Image()
let imgInfo = {} // 原始文件信息

// 文件读取成功后的回调
render.onload = (e) => {
    let r = e.target.result
    img.src = r
    imgBox.appendChild(img)
}
// 监听文件上传事件
file.addEventListener('change', (e) => {
    let files = e.target.files[0]
    imgInfo['lastModified'] = files['lastModified']
    imgInfo['name'] = files['name']
    imgInfo['originSize'] = files['size']
    imgInfo['originType'] = files['type']
    render.readAsDataURL(files) // 转base64编码
})
// 图片加载完成
img.onload = () => {
    // debugger
    let originWidth = img.width
    let originHeight = img.height
    let targetW = originWidth
    let targetH = originHeight
    imgInfo['originWidth'] = img.width
    imgInfo['originHeight'] = img.height
    // 只要原始图片的宽度大于最大宽度 或者 原始图片的高度大于最大高度，就需要压缩
    if (originWidth > MAXWIDTH || originHeight > MAXHEIGHT) {
        // 说明更宽,按照最大宽度限定尺寸
        if ((originWidth / originHeight) > (MAXWIDTH / MAXHEIGHT)) {
            targetW = MAXWIDTH
            targetH = Math.round(MAXHEIGHT * (originHeight / originWidth))
        }else { // 说明原始图片更高，按照最大高度来限定尺寸
            targetH = MAXHEIGHT
            targetW = Math.round( MAXWIDTH * (originWidth / originHeight))
        }
        imgInfo['height'] = targetH
        imgInfo['width'] = targetW
        let ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, targetW, targetH)
        ctx.drawImage(img, targetW, targetH)
        canvas.toBlob(blob => {
            Object.keys(imgInfo).forEach(i => {
                blob[i] = imgInfo[i]
            })
            console.log(blob)
            // 发送图片信息给后台即可
            // ··· ···
        })
    }
}
</script>

 

 

最终效果图：