【vue】上传图片旋转问题

【记录一下项目中遇到的问题。】

问题：

做上传图片的功能时， 可以选择文件、可以选择拍照上传，发现安卓手机上传的图片出现转向问题。

解决

获取图片的方向信息， 做旋转后再进行上传。

1、安装、引用exif-js

npm i exif-js -S

import EXIF from 'exif-js';

let img = new Image();
img.src = e.target.result;

EXIF.getData(img, () => {
    let orientation = EXIF.getTag(img, 'Orientation');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    //判断是苹果ios还是安卓
    let isIos = navigator.userAgent.match(/ipad|iphone/i);
    if (isIos) {
        orientation = '';// ios: 无旋转问题
    }
    var originWidth = img.width, originHeight = img.height;
    // 最大尺寸限制
    var maxWidth = 1000, maxHeight = 1000;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;

    switch (orientation) {
        case 3:
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            ctx.rotate(Math.PI);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight);// 图片压缩
            break;
        case 6:
            canvas.width = targetHeight;
            canvas.height = targetWidth;
            ctx.rotate(0.5 * Math.PI);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight);// 图片压缩
            break;
        case 8:
            canvas.width = targetHeight;
            canvas.height = targetWidth;
            ctx.rotate((3 * Math.PI) / 2);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, -targetWidth, 0, targetWidth, targetHeight);// 图片压缩
            break;
        default:
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);// 图片压缩
            break;
    }

    let ndata = canvas.toDataURL("image/jpeg", 0.7);

旋转、压缩代码：

EXIF.getData(img, () => {
    let orientation = EXIF.getTag(img, 'Orientation');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    //判断是苹果ios还是安卓
    let isIos = navigator.userAgent.match(/ipad|iphone/i);
    if (isIos) {
        orientation = '';// ios: 无旋转问题
    }
    var originWidth = img.width, originHeight = img.height;
    // 最大尺寸限制
    var maxWidth = 1000, maxHeight = 1000;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 图片尺寸超过限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
            );
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
            );
        }
    }
    switch (orientation) {
        case 3:
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            ctx.rotate(Math.PI);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight);// 图片压缩
            break;
        case 6:
            canvas.width = targetHeight;
            canvas.height = targetWidth;
            ctx.rotate(0.5 * Math.PI);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight);// 图片压缩
            break;
        case 8:
            canvas.width = targetHeight;
            canvas.height = targetWidth;
            ctx.rotate((3 * Math.PI) / 2);
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, -targetWidth, 0, targetWidth, targetHeight);// 图片压缩
            break;
        default:
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            ctx.clearRect(0, 0, targetWidth, targetHeight);// 清除画布
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);// 图片压缩
            break;
    }

    let ndata = canvas.toDataURL("image/jpeg", 0.7);
   
    let time = new Date().getTime();
    if (viewRef === "img1") {
        that.base64img1 = ndata;
        that.idcardFront = CommonJS.base64toFile(ndata, "idcardFront" + time + ".png");
        that.fileUpload(that.idcardFront, "idcardFront");
    }
    if (viewRef === "img2") {
        that.base64img2 = ndata;
        that.idcardBack = CommonJS.base64toFile(ndata, "idcardBack" + time + ".png");
        that.fileUpload(that.idcardBack, "idcardBack");
    }
    if (viewRef === "img3") {
        that.base64img3 = ndata;
        that.idcardInHand = CommonJS.base64toFile(ndata, "idcardInHand" + time + ".png");
        that.fileUpload(that.idcardInHand, "idcardInHand");
    }
});