js canvas如何实现压缩图片？

Question

需求是实现压缩上传。网上看了大多是canvas方法实现，于是仿照着写了个。但是似乎并没什么用。上传后下载下来图片依然很大。

代码如下

        html5Reader(file, item){

            const reader = new FileReader();

            let Img = new Image();

            let newImageData;

            Img.src =  window.URL.createObjectURL(file);

            Img.onload = (e) => {

                let canvas = document.createElement('canvas');

                let ctx = canvas.getContext('2d');                       

                canvas.width = Img.width;

                canvas.height = Img.height;

                ctx.drawImage(Img, 0, 0, canvas.width, canvas.height);

                newImageData = canvas.toDataURL('image/jpeg', 0.1);

                console.log(newImageData)                    

                this.$set(item, 'src', newImageData);

            };                

        },

Answer 1

问题解决了。需要把base64的图片再转为普通图片上传。