Vant van-uploader 图片上传压缩 不缩减长宽

Vant 图片上传压缩

还是接着上一篇文章，表单图片压缩，然后上传。

图片压缩

js压缩，就是用canvas对象重新在画一张图。关于js canvas压缩的代码有很多，我这里就不赘述了。

van-uploader 上传压缩

首先先看官网 https://youzan.github.io/vant/#/zh-CN/uploader

部分代码

<van-uploader
        accept="image/gif, image/jpeg ,image/png"
        :after-read="afterHandleImg"
        v-model="uploaderImg"
        multiple
        :max-count="1"
></van-uploader>

xxxx
中间代码省略
xxxx

<script>
new Vue({
    el: '#app',
    data: {
    	uploaderImg:[]
    },
    methods: {
		// 处理图片压缩
        afterHandleImg(file) {
            let canvas = document.createElement('canvas'); // 创建Canvas对象(画布)
            let context = canvas.getContext('2d');
            let img = new Image();
            img.src = file.content;                         // 指定图片的DataURL(图片的base64编码数据)
            img.onload = function () {
                // 画布大小 这里的this指向img
                canvas.width = this.width;
                canvas.height = this.height;
                context.drawImage(img, 0, 0, this.width, this.height);  // 图片大小
                file.content = canvas.toDataURL(file.file.type, 0.3);   // 0.92为默认压缩质量
            };
        }
	}
});

</script>            

总结

没啥难度，就是纯粹当个笔记记下来。