使用Canvas封装图片压缩功能

最近在学习和工作中遇到这样一个场景：如何将前端上传的图片进行压缩传递给服务端？因为此前从未了解过图片压缩的功能，所以也是带着好奇进行了一番学习，那么我的解决思路如下展示

整体思路

1. 创建input框实现图片上传
2. 将上传的文件转成base64格式
3. 前端通过base64进行原始图片展示，并将此图片进行压缩
4. 将压缩后的图片传给服务器

代码实现

首先我们要实现input上传文件并做一些细节处理，细节处理要对上传的文件类型和上传的文件大小做限制，类型和大小这里我们可以根据规则自定义。

<div class="container">
    <input type="file" id="upload" />
</div>
const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'] // 所能接受的类型（自定义）
const MAXSIZE = 3 * 1024 * 1024 // 上传图片大小限制（自定义）
const MAXSIZE_STR = '3MB'
const upload = document.getElementById('upload')
upload.addEventListener('change', (e) => {
    const [file] = e.target.files
    if (!file) return // 上传文件为空时终止
    const { type: fileType, size: fileSize } = file
    // 类型判断
    if (!ACCEPT.includes(fileType)) {
        alert('不支持' + fileType + '文件类型')
        upload.value = ''
        return
    }
    // 图片大小判断
    if (fileSize > MAXSIZE) {
        alert(`文件超出${MAXSIZE_STR}限制`)
        upload.value = ''
        return
    }
    // 压缩图片
    covertImageToBase64(file, (base64Image) =>
        compress(base64Image, uploadServer)
    )
})

当所有限制都通过之后，就要将图片转为base64格式，也就是进入到covertImageToBase64函数，我们来看看这个函数做了什么

function covertImageToBase64(file, callback) {
    let reader = new FileReader()
    reader.readAsDataURL(file) // 读取二进制数据，并将其编码为 base64 的 data url

    // 读取完成进行下面操作
    reader.addEventListener('load', function (e) {
        const base64Image = reader.result
        callback && callback(base64Image) // 将读取到的结果传递给回调函数中
        reader = null
    })
}

这里我们要将上传获取的_file_进行编码转换，通过FileReaader^[1]构造函数中的 readAsDataURL^[2]方法进行转换，将编码后的格式文件传递给回调函数中准备进行压缩处理

到这里这里为了方便大家的理解，我做了一个动图方便观看效果，样式比较简陋