uniapp 上传图片压缩

学习 · 2021-03-17

H5版本

        /**
        * 压缩
        * @param {Object} imgSrc 图片url
        * @param {Object} callback 回调设置返回值
        */
        translate(imgSrc, callback) {
            var that = this
            var img = new Image();
            img.src = imgSrc;
            img.onload = function() {
                var _that = this;
                var h = _that.height;
                // 默认按比例压缩
                var w = _that.width;
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(_that, 0, 0, w, h);
                //压缩比例
                var quality = 0.5;
                var base64 = canvas.toDataURL('image/jpeg', quality);
                canvas = null;
                var blob = that.base64ToBlob(base64);
                // console.log(blob)
                //Blob对象转blob地址
                var blobUrl = window.URL.createObjectURL(blob);
                callback(blobUrl);
            }
        },

        /**
        * base转Blob对象
        * @param {Object} base64 base64地址
        */
        base64ToBlob(base64) {
            var arr = base64.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            
            return new Blob([u8arr], {
                type: mime
            });
        }

APP

//压缩图片

        compressImage(img) {
            console.log('开始压缩');
            let that = this
            return new Promise((res) => {
                // var localPath = plus.io.convertAbsoluteFileSystem(img);
                plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象
                    entry.file((file) => { // 可通过entry对象操作图片 
                        console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
                        if (file.size > 504800) { //   如果大于500Kb进行压缩
                            plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
                                src: img, //src: 压缩原始图片的路径    
                                dst: img.replace('.png', '2222.png').replace('.PNG',
                                        '2222.PNG').replace('.jpg', '2222.jpg')
                                    .replace('.JPG', '2222.JPG'),
                                width: '40%', //dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个2222区分一下
                                height: '40%', //width,height: (String 类型 )缩放图片的宽度,高度
                                quality: 10, //quality: (Number 类型 )压缩图片的质量
                                overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
                                // format:'jpg'   //format: (String 类型 )压缩转换后的图片格式
                            }, (event) => {
                                console.log('压缩后图片信息:' + JSON.stringify(
                                event)); // 压缩后图片信息
                                this.imageInfo = event
                                let newImg = event.target;
                                res(newImg); //返回新的图片地址,在uploadFile之前接收
                            }, function(err) {
                                console.log('Resolve file URL failed: ' + err.message);
                            });
                        } else { //else小于500kb跳过压缩,直接返回现有的src
                            res(img);
                        }
                    });
                }, (e) => { // 返回错误信息
                    console.log('Resolve file URL failed: ' + e.message);
                });
            })
        }
uniapp javascript 上传
Theme Jasmine by Kent Liao | 桂ICP备15008025号-6