mgrading/src/utils/fileUtil.js

import EXIF from 'exif-js'

// 旋转图片
const rotateImg = (img, direction, canvas) => {
    //最小与最大旋转方向，图片旋转4次后回到原方向
    const min_step = 0;
    const max_step = 3;
    if (img == null) return;
    //img的高度和宽度不能在img元素隐藏后获取，否则会出错
    let height = img.height;
    let width = img.width;
    let step = 2;
    if (step == null) {
        step = min_step;
    }
    if (direction == "right") {
        step++;
        //旋转到原位置，即超过最大值
        step > max_step && (step = min_step);
    } else {
        step--;
        step < min_step && (step = max_step);
    }
    //旋转角度以弧度值为参数
    let degree = (step * 90 * Math.PI) / 180;
    let ctx = canvas.getContext("2d");
    switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height);
            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0);
            break;
    }
}
export default {
    getOrientation: (file) => {
        return new Promise((resolve) => {
            EXIF.getData(file, function () {
                // console.log(EXIF.getAllTags(this))
                const orient = EXIF.getTag(this, 'Orientation')
                // console.log(orient)
                resolve(orient)
            })
        })
    },

    dataURLtoFile: (dataUrl, filename) => {
        const arr = dataUrl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
            type: mime
        });
    },

    // rotateImage: (image, width, height) => {
    //     let canvas = document.createElement('canvas')
    //     let ctx = canvas.getContext('2d')
    //     ctx.save()
    //     canvas.width = height
    //     canvas.height = width
    //     ctx.rotate(90 * Math.PI / 180)
    //     ctx.drawImage(image, 0, -height)
    //     ctx.restore()
    //     return canvas.toDataURL("image/jpeg")
    // },

    rotateImage: (img, width, height, Orientation) => {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        ctx.save()
        canvas.width = height
        canvas.height = width
        //修复ios上传图片的时候 被旋转的问题
        if (Orientation != "" && Orientation != 1) {
            switch (Orientation) {
                case 6: //需要顺时针（向左）90度旋转
                    rotateImg(img, "left", canvas);
                    break;
                case 8: //需要逆时针（向右）90度旋转
                    rotateImg(img, "right", canvas);
                    break;
                case 3: //需要180度旋转
                    rotateImg(img, "right", canvas); //转两次
                    rotateImg(img, "right", canvas);
                    break;
            }
        }

        // ctx.rotate(90 * Math.PI / 180)
        // ctx.drawImage(img, 0, -height)
        ctx.restore()
        return canvas.toDataURL("image/jpeg")
    }
}