前端如何压缩图片在进行上传给后端

前端压缩图片我目前能想到的就是 通过canvas 改变图片的 画质去改变图片的大小。

解决方案如下:

1、首先获取图片的全部内容,然后转化为base64让他可以在页面上展示。

2、当我们获取到base64的图片的时候我们就可以获取图片的大小尺寸。

3、我们把这个图片放置到canvas上面去,然后通过cavans属性drawImg重新获取图片。

4、将重新获取的图片转化为url。

注意注意:当前只支持jpg图片的压缩,因为手机拍出来的图片是jpg图片。这是我的场景需要,如果你是png不建议你用,或者你有更好的方案可以也给我说说~~~

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="btn">上传</div>
</body>

</html>
<script>

    let btn = document.querySelector('.btn');
    class CompressImg {
        fileReader = new FileReader();
        constructor(options) {
            this.options = options;
            this.createBase64();
        }
        createBase64() {
            // console.log(fileRender)
            this.fileReader.onload = (e) => {
                console.log(e.target?.result, '---')
                this.compress(e.target?.result)
            }
            this.fileReader.readAsDataURL(this.options.file);
        }
        compress(url) {
            const img = new Image();
            img.src = url;
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            ctx.height = img.height;
            ctx.width = img.width;
            img.onload = () => {
                ctx.drawImage(img, 0, 0, img.width, img.height);
                const base = canvas.toDataURL(this.options.file.type, this.options.quality);
                this.options.success(base);

            }
        }
    }

    btn.addEventListener('click', () => {
        showOpenFilePicker().then(async (file) => {
            const files = await file[0].getFile();
            if (files) {
                new CompressImg({
                    file: files,
                    quality: 1,
                    success: (url) => {
                        console.log(url)
                    }
                })
            }
        })
    })
</script>

效果:

相关推荐
LuciferHuang6 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing6 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20156 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言7 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友9 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手9 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿10 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉