图片压缩上传

有些情况会遇到图片上传时规定在1M以内，这时候就要将图片进行压缩了

压缩流程：
读取文件
创建Image对象
创建canvas元素
计算压缩后的尺寸
绘制图片
获取压缩后的图片
检查压缩后的大小

vue

<template>
    <div>
        <input type="file" @change="change" name="" id="">
        <img :src="imgSrc" alt="">
    </div>
</template>

<script>
    export default {
        name: "UploadImg",
        data() {
            return {
                imgSrc:""
            }
        },
        methods: {
            change(e){
               var file = e.target.files[0];
                this.compressImage(file, 320, 605, 0.7).then(base64Image => {
                    console.log(base64Image); // 这就是你的压缩后的Base64编码的图片
                    this.imgSrc = base64Image;
                });
            },
            compressImage(file, maxWidth, maxHeight, quality) {
                return new Promise((resolve, reject) => {
                    // 创建一个新的Image对象
                    let img = new Image();
                    // 创建一个新的FileReader对象
                    let reader = new FileReader();
                    // 设置FileReader的onload事件处理器
                    reader.onload = function(event) {
                        // 当文件读取完成时，将结果赋值给img的src属性
                        img.src = event.target.result;
                    };
                    // 设置img的onload事件处理器
                    img.onload = function() {
                        // 创建一个新的canvas元素
                        let canvas = document.createElement('canvas');
                        let ctx = canvas.getContext('2d');
                        // 计算压缩后的图片尺寸
                        let ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
                        let width = img.width * ratio;
                        let height = img.height * ratio;
                        // 设置canvas的尺寸
                        canvas.width = width;
                        canvas.height = height;
                        // 将图片绘制到canvas上
                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas的内容转换为Base64编码的URL
                        let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
                        let dataUrl = canvas.toDataURL('image/'+ext, quality);
                        // 将结果传递给Promise的resolve函数
                        resolve(dataUrl);
                    };
                    // 开始读取文件
                    reader.readAsDataURL(file);
                });
            }
            
        }
    }
</script>

<template>
    <div>
        <input type="file" @change="change" name="" id="">
        <img :src="imgSrc" alt="">
    </div>
</template>

<script>
    export default {
        name: "UploadImg",
        data() {
            return {
                imgSrc:""
            }
        },
        methods: {
            change(e){
               var file = e.target.files[0];
                this.compressImage(file, 320, 605, 0.7).then(base64Image => {
                    console.log(base64Image); // 这就是你的压缩后的Base64编码的图片
                    this.imgSrc = base64Image;
                });
            },
            compressImage(file, maxWidth, maxHeight, quality) {
                return new Promise((resolve, reject) => {
                    // 创建一个新的Image对象
                    let img = new Image();
                    // 创建一个新的FileReader对象
                    let reader = new FileReader();
                    // 设置FileReader的onload事件处理器
                    reader.onload = function(event) {
                        // 当文件读取完成时，将结果赋值给img的src属性
                        img.src = event.target.result;
                    };
                    // 设置img的onload事件处理器
                    img.onload = function() {
                        // 创建一个新的canvas元素
                        let canvas = document.createElement('canvas');
                        let ctx = canvas.getContext('2d');
                        // 计算压缩后的图片尺寸
                        let ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
                        let width = img.width * ratio;
                        let height = img.height * ratio;
                        // 设置canvas的尺寸
                        canvas.width = width;
                        canvas.height = height;
                        // 将图片绘制到canvas上
                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas的内容转换为Base64编码的URL
                        let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
                        let dataUrl = canvas.toDataURL('image/'+ext, quality);
                        // 将结果传递给Promise的resolve函数
                        resolve(dataUrl);
                    };
                    // 开始读取文件
                    reader.readAsDataURL(file);
                });
            }
            
        }
    }
</script>

图片压缩上传 ​

图片压缩上传