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

比眉伴天荒 2023-02-14 15:45 36阅读 0赞

**以下案例：**

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

**大致思路：**

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

关于 **canvas.toBlob** 请看：[https://blog.csdn.net/qq\_42778001/article/details/106522594][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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

**最终效果图：**

![20200603173134329.gif][]

[https_blog.csdn.net_qq_42778001_article_details_106522594]: https://blog.csdn.net/qq_42778001/article/details/106522594
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604081033838.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20200603173134329.gif]: https://img-blog.csdnimg.cn/20200603173134329.gif