手机 调用相机/相册 旋转压缩 上传

安装exif-js.js    ios及部分安卓机拍照后会有旋转，利用exif获取旋转角度

npm install exif-js --save

orientation值	旋转角度
1	0度
3	180度
6	顺时针90度
8	逆时针90度

 

下面是例子：（vue）

显示效果：

<template>
    <div>
        <span @click="fileClick">点击上传</span>

        <input
            ref="upload_file"
            id="upload_file"
            type="file"
            style="display: none;"
            accept="image/*"
            name="file"
            @change="fileChange($event)"
        />

        <img :src="masterHeader">
    </div>
</template>
<script>
import EXIF from "exif-js";
import { imgUpload } from "@/api/api";

export default {
    data() {
        return {
            imgUrl: "http://xxx",
            masterHeader: ""
        };
    },
    methods: {
        //调用相册&相机
        fileClick() {
            this.$refs.upload_file.click();
        },
        //添加获取文件信息
        fileChange(el) {
            let file = this.$refs.upload_file.files[0];
            // console.log(file);
            // console.log(this.$refs.upload_file.files[0].type)
            if (file.type.indexOf("image") == -1) {
                alert("请上传图片");
                return;
            }

            this.compress2(file);
        },
        // 旋转&压缩
        compress2(fileObj) {
            let _this = this;
            var orientation;
            var direction;
            var dir;
            var s = 1;
            let reader = new FileReader();
            reader.readAsDataURL(fileObj); // 将图片转成base64
            reader.onload = e => {
                let image = new Image(); // 新建一个img标签（还没嵌入DOM节点)
                image.src = e.target.result;

                image.onload = () => {
                    EXIF.getData(image, function() {
                        direction = EXIF.getTag(this, "Orientation");
                    });

                    let canvas = document.createElement("canvas"),
                        context = canvas.getContext("2d"),
                        data = "";

                    switch (direction) {
                        case 6: // 顺时针旋转90度
                            dir = "right";
                            break;
                        case 8: // 逆时针旋转90度
                            dir = "left";
                            break;
                        case 3: // 顺时针旋转180度
                            dir = "right";
                            s = 2;
                            break;
                        default:
                            break;
                    }

                    const MIN_STEP = 0;
                    const MAX_STEP = 3;

                    const width = canvas.width || image.width;
                    const height = canvas.height || image.height;
                    let step = 0;

                    if (dir === "right") {
                        step += s;
                        step > MAX_STEP && (step = MIN_STEP);
                    } else if (dir == "left") {
                        step -= s;
                        step < MIN_STEP && (step = MAX_STEP);
                    } else {
                        step = -1;
                    }

                    const degree = (step * 90 * Math.PI) / 180;

                    switch (step) {
                        case 1:
                            canvas.width = height;
                            canvas.height = width;
                            context.rotate(degree);
                            context.drawImage(image, 0, -height, width, height);
                            break;
                        case 2:
                            canvas.width = width;
                            canvas.height = height;
                            context.rotate(degree);
                            context.drawImage(image, -width, -height, width, height);
                            break;
                        case 3:
                            canvas.width = height;
                            canvas.height = width;
                            context.rotate(degree);
                            context.drawImage(image, -width, 0, width, height);
                            break;
                        default:
                            canvas.width = width;
                            canvas.height = height;
                            context.drawImage(image, 0, 0, width, height);
                            break;
                    }

                    // context.drawImage(image, 0, 0, imageWidth, imageHeight);
                    data = canvas.toDataURL("image/jpeg", 0.3); // 压缩完成
                    this.dataURLtoFile(data, fileObj.name);
                };
            };
        },
        // 将base64转换为文件
        dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            let file = new File([u8arr], filename, { type: mime });

            var formdata = new FormData();
            formdata.append("enctype", "multipart/form-data");
            formdata.append("name", "file");
            formdata.append("file", file);
            // Indicator.open(); // loading打开

            // 图片上传接口
            imgUpload(formdata).then(res => {
                if (res.data.state == "200") {
                    this.masterHeader = this.imgUrl + res.data.data;
                    console.log(this.masterHeader)
                }
                // Indicator.close();  // loading关闭
            })
            .catch(err => {
                // Indicator.close();  // loading关闭
            });
        }
    }
};
</script>