canvas+exif解决图片压缩及iPhone拍照旋转问题

图片上传及获取拍照信息方法

        async gotImage(event){            this.pageShow.waiting = true;            var that = this;            var simpleFile = this.$refs.selectInp.files[0];            if(!/image\/\w+/.test(simpleFile.type)) {                this.pageShow.waiting = false;                alert("请确保文件类型为图像类型");                return false;            }            var reader = new FileReader();            // 获得图片旋转信息            EXIF.getData(simpleFile,function(){                that.orientation = EXIF.getTag(this, "Orientation");                console.log('图片拍照方向：',that.orientation);            })            // 将文件以Data URL形式进行读入页面            reader.readAsDataURL(simpleFile);            reader.onload = async function(e){                that.aiBeforeImg = e.target.result;                let selectImg = await that.zipImg(e.target.result,1000);                // console.log('压缩后图片',selectImg);                var data = new FormData();                data.append('type','base64');                data.append('ret_img_type','foreground');                data.append('original_img',selectImg);                console.log('上传数据',data)                that.$http.post(that.baseUrl+'/api/bdai/BdBodySeg',data)  // data:image/png;base64,                .then(async (res)=>{                    if(res.body.errorCode){                        that.aiAfterImg = 'data:image/png;base64,' + res.body.img_body.foreground                        let aiAfterImg = 'data:image/png;base64,' + res.body.img_body.foreground;                        let canvasAfterImg = await filterImg(aiAfterImg);                        // console.log('after',canvasAfterImg)                        that.$store.commit({                            type: 'aiAfterImg',                            aiAfterImg                        })                        that.$store.commit({                            type: 'canvasAfterImg',                            canvasAfterImg                        })                        that.pageShow.index1 = false;                        that.pageShow.aiImg = true;                        that.pageShow.waiting = false;                        that.$refs.aiBeforeImg.setAttribute('class','aiBeforeImgBox widthChange');                        setTimeout(()=>{                            that.$router.push('/Editor');                        },4000);                    }else{                        that.pageShow.loading = false;                        alert('上传失败！');                    }                })                .catch(err=>{                    that.pageShow.loading = false;                    alert('上传失败！');                })            }                                },

其中有用的是以下代码，使用exif库，获取图片的拍照方向

EXIF.getData(simpleFile,function(){                that.orientation = EXIF.getTag(this, "Orientation");                console.log('图片拍照方向：',that.orientation);            })

图片压缩及旋转修复

 zipImg(url,size){            console.log('zipImg')            let that = this;            return new Promise((resolve)=>{                // canvas                let canvas = document.createElement('canvas');                let ctx = canvas.getContext('2d');                // img                let img = new Image();                img.src = url;                img.onload = function(){                    // console.log('所选图片大小',img.width,img.height);                    let width = img.width;                    let height = img.height;                                        if(img.width>img.height && img.width>size){                        // console.log('压缩图片宽度到'+size);                        width = size;                        height = parseInt(img.height*size/img.width);                    }else if(img.height>=img.width && img.height >= size){                        // console.log('压缩图片高度到'+size);                        height = size;                        width = parseInt(img.width*size/img.height);                    }                    canvas.setAttribute('width',width);                    canvas.setAttribute('height',height);                    switch (that.orientation) {                        case 3:                            ctx.save();                            ctx.translate(width/2,height/2);                            ctx.rotate(180 * Math.PI / 180);                            ctx.drawImage(img, -width/2,-height/2,width,height);                            ctx.restore();                            break;                        case 6:                            canvas.setAttribute('width',height);                            canvas.setAttribute('height',width);                            ctx.save();                            ctx.translate(height/2,width/2);                            ctx.rotate(90 * Math.PI / 180);                            ctx.drawImage(img, -width/2,-height/2,width,height);                            ctx.restore();                            break;                        case 8:                            canvas.setAttribute('width',height);                            canvas.setAttribute('height',width);                            ctx.save();                            ctx.translate(height/2,width/2);                            ctx.rotate(270 * Math.PI / 180);                            ctx.drawImage(img, -width/2,-height/2,width,height);                            ctx.restore();                            break;                        default:                            ctx.drawImage(img, 0, 0, width,height);                    }                    let result = canvas.toDataURL('image/jpg');                    // console.log(result)                    resolve(result)                }            })                    },

压缩思想

获取图片原本宽高，计算宽高比例，然后计算画布大小（按原图比例最大宽高1000px)，绘制图片，获取dataURL，获得压缩后图片

ios图片旋转修复

当图片的orientation信息分别为6，3，8时，图片与正确的图片被逆时针旋转了90，180，270度，所以需要利用canvas将图片旋转正确即可。