前端 canvas压缩图片上传

HTML代码

       <input type="file" name="" id="upload">

JS代码

		// 获取input元素
        const upload = document.getElementById('upload')

        upload.addEventListener('change', (e) => changeCallback(e))

        // 选择文件后执行的回调
        function changeCallback(e) {
            const FILE_SIZE = 4 * 1024 * 1024
            const FILE_DESC = '1MB'
            const FILE_TYPE = ['image/png', 'image/gif']

            const [file] = e.target.files
            const {
                size: fileSize,
                type: fileType
            } = file

            const index = FILE_TYPE.findIndex(item => {
                return item === fileType
            })
            // 图片类型检查
            if (index < 0) {
                alert(`不支持[${fileType}]文件类型`)
                upload.value = ''
                return
            }
            // 图片容量检查
            if (fileSize > FILE_SIZE) {
                alert(`文件大于${FILE_DESC}`)
                upload.value = ''
                return
            }
            // 压缩图片
            convertImageBase64(file, (base64Image) => compress(base64Image, uploadToServer))
        }

        // 将图片转化为base64
        function convertImageBase64(file, callback) {
            const reader = new FileReader()
            reader.addEventListener('load', (e) => {
                const base64 = e.target.result
                callback && callback(base64)
                // reader = null // 释放内存
            })
            reader.readAsDataURL(file)
        }

        // 输出压缩后的base64
        function compress(base64Image, callback) {
            let maxW = 1024 // 允许图片的最大宽度
            let maxH = 1024 // 允许图片的最大高度

            const image = new Image()
            image.addEventListener('load', (e) => {
                let ratio // 图片压缩比
                let needCompress = false // 释放需要压缩

                const imageW = image.naturalWidth // 图片的原始宽度
                const imageH = image.naturalHeight // 图片的原始高度

                if (maxW < imageW) {
                    needCompress = true
                    ratio = imageW / maxW //获取压缩比
                    maxH = imageH / ratio //根据压缩比重新计算高度
                }
                if (maxH < imageH) {
                    needCompress = true
                    ratio = imageH / maxH //获取压缩比
                    maxW = imageW / ratio //根据压缩比重新计算宽度
                }

                // 如不需要压缩,获取图片实际尺寸
                if (!needCompress) {
                    maxW = imageW
                    maxH = imageH
                }

                const canvas = document.createElement('canvas')
                canvas.setAttribute('id', '__compress__')
                canvas.width = maxW
                canvas.height = maxH
                canvas.style.visibility = 'hidden'
                document.body.appendChild(canvas)

                const ctx = canvas.getContext('2d')
                ctx.clearRect(0, 0, maxW, maxH) // 清除画布，防止出现多个图片重叠
                ctx.drawImage(image, 0, 0, maxW, maxH)

                const compressImage = canvas.toDataURL('image/jpeg', 0.9)
                callback(compressImage)
                canvas.remove()

                // 显示压缩后的图片
                const __image__ = new Image()
                __image__.src = compressImage
                document.body.appendChild(__image__)
            })
            image.src = base64Image
            document.body.appendChild(image) // 显示上传的图片预览
        }

        // 压缩成功后的回调（上传至服务器）
        function uploadToServer(compressImage) {
            console.log('upload to server ...');
        }