Vue中使用android和ios手机打开相机并选择相册功能和图片旋转问题

<template>

  <div>

    <input type="file" id="fileElem" accept="image/*" @change="chooseImg" ref="imgFile"/>

　　//使用的vant插件

　　<van-action-sheet v-model="showCameraSelect" :actions="actions" :cancel-text="'取消'" @cancel="showCameraSelect=false" />

  </div>

</template>

<script>

//cnpm下载exif-js

  import EXIF from "exif-js";

  export default {

    data() {

      return {

　　　　　 actions:[],

        　showCameraSelect: false

      }

    },

    created() {

       this.actions = [{

          name: '相机拍摄',

          model: 'camera'

        },

        {

          name: '选择图片',

          model: 'select'

        }

      ];

    },

     mounted() {

       //判断数组中是否包含某字符串

      Array.prototype.contains = function (needle) {

        for (i in this) {

          if (this[i].indexOf(needle) > 0)

            return i;

        }

        return -1;

      }

      var device_type = navigator.userAgent; //获取userAgent信息

      var md = new MobileDetect(device_type); //初始化mobile-detect

      var os = md.os(); //获取系统

      var model = "";

      if (os == "iOS") { //ios系统的处理

        this.$refs.imgFile.removeAttribute("capture");

      }else{

        let brand = this.phoneBrand()

        if ( brand === 'xiaomi') { // 华为、小米手机：相册选择、拍摄

          this.$refs.imgFile.setAttribute("accept","image/*");

        }else{

          this.$refs.imgFile.setAttribute("capture","user");

        }

      }

    },

    methods: {

　　// 获取手机品牌

　　phoneBrand() {

  　　let sUserAgent = navigator.userAgent.toLowerCase()

  　　let isIphone = sUserAgent.match(/iphone/i) == "iphone";

  　　let isHuawei = sUserAgent.match(/huawei/i) == "huawei";

  　　let isHonor = sUserAgent.match(/honor/i) == "honor";

  　　let isOppo = sUserAgent.match(/oppo/i) == "oppo";

  　　let isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";

  　　let isVivo = sUserAgent.match(/vivo/i) == "vivo";

  　　let isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";

  　　let isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";

  　　let isRedmi = sUserAgent.match(/redmi/i) == "redmi";

  　　let isSamsung = sUserAgent.match(/sm-/i) == "sm-";

  　　if (isIphone) {

    　　return 'iphone';

  　　} else if (isHuawei || isHonor) {

    　　return 'huawei';

  　　} else if (isOppo || isOppoR15) {

    　　return 'oppo';

  　　} else if (isVivo) {

    　　return 'vivo';

  　　} else if (isXiaomi || isRedmi || isXiaomi2s) {

    　　return 'xiaomi';

  　　} else if (isSamsung) {

    　　return 'samsung';

  　　} else {

    　　return 'default';

  　　}

　　}

      // 触发拍摄

      shootStart() {

        setTimeout(()=>{

          let fileElem = document.getElementById("fileElem");

          let brand = this.phoneBrand()

          if ( brand === 'xiaomi' || brand === 'huawei') { // 华为、小米手机：相册选择、拍摄

          this.$dialog.confirm({

            message: '如果您的手机不支持拍摄上传照片，请从本地相册上传',

            showCancelButton: false,

            confirmButtonText:'确定'

          }).then(() => {

            // fileElem.removeAttribute('capture');

            this.$nextTick(()=>{

              //触发点击事件

              let event = document.createEvent("MouseEvents");

              event.initEvent("click", true, true);

              document.getElementById("fileElem").dispatchEvent(event);

            })

          })

          }else { // 非小米：前置摄像头拍摄

          this.$nextTick(()=>{

            let event = document.createEvent("MouseEvents");

            event.initEvent("click", true, true);

            document.getElementById("fileElem").dispatchEvent(event);

          })

          }

        }, 100)

      },

      //选择图片/拍摄照片

      chooseImg(e) {

        let files = e.target.files || e.dataTransfer.files;

        if (!files.length) return;

　　　　this.imgPreview(files[0]);

      },

      // 预览图片

      imgPreview(file, isRepeat) {

        let that = this;

        if (file) {

          let Orientation;

          EXIF.getData(file, function() {

            EXIF.getAllTags(this);

            Orientation = EXIF.getTag(this, 'Orientation');

            let reader = new FileReader();

            reader.readAsDataURL(file);

            reader.onload = function(ev) {

              const quality = 0.95; //图像质量

              let image = new Image();

              let canvas = document.createElement('canvas'),

                  ctx = canvas.getContext('2d');

              /* 旋转绘制 */

              let rotateImage = function(img, dir, canvas, s) {

                dir = dir || 'right';

                s = s || 1;

                let MIN_STEP = 0,

                    MAX_STEP = 3,

                    width = canvas.width || img.width,

                    height = canvas.height || img.height,

                    step = 0;

                if (dir === 'right') {

                  step += s;

                  step > MAX_STEP && (step = MIN_STEP);

                } else {

                  step -= s;

                  step < MIN_STEP && (step = MAX_STEP);

                }

                let degree = step * 90 * Math.PI / 180;

                switch (step) {

                  case 1:

                    canvas.width = height;

                    canvas.height = width;

                    ctx.rotate(degree);

                    ctx.drawImage(img, 0, -height, width, height);

                    break;

                  case 2:

                    canvas.width = width;

                    canvas.height = height;

                    ctx.rotate(degree);

                    ctx.drawImage(img, -width, -height, width, height);

                    break;

                  case 3:

                    canvas.width = height;

                    canvas.height = width;

                    ctx.rotate(degree);

                    ctx.drawImage(img, -width, 0, width, height);

                    break;

                  default:

                    canvas.width = width;

                    canvas.height = height;

                    ctx.drawImage(img, 0, 0, width, height);

                    break;

                }

              };

              /* 绘制 */

              let draw = function() {

                /* 图片原始大小 */

                let width = image.width,

                    height = image.height;

                /* 图片尺寸缩放比 800 为基数 */

                if (width > 3200 || height > 3200) {

                  width = Math.floor(width / 4);

                  height = Math.floor(height / 4);

                } else if (width > 2400 || height > 2400) {

                  width = Math.floor(width / 3);

                  height = Math.floor(height / 3);

                } else if (width > 1600 || height > 1600) {

                  width = Math.floor(width / 2);

                  height = Math.floor(height / 2);

                }

                canvas.width = width;

                canvas.height = height;

                /*canvas清屏*/

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                if (Orientation && Orientation !== 1) {

                  switch (Orientation) {

                    case 6:

                      /* 顺时针旋转90度 */

                      rotateImage(image, 'right', canvas);

                      break;

                    case 8:

                      /* 逆时针旋转90度 */

                      rotateImage(image, 'left', canvas);

                      break;

                    case 3:

                      /* 顺时针旋转180度 */

                      rotateImage(image, 'right', canvas, 2);

                      break;

                    default:

                      break;

                  }

                }else {

                  ctx.drawImage(image, 0, 0, width, height);

                }

                //第一个参数为图片类型,如image/jpeg, image/png, image/gif;第二个参数为图片质量(针对image/jpeg、image/webp)

                let dataURI = canvas.toDataURL("image/jpeg", quality);

                that.validSize(file.name, dataURI);

              };

              /* 图像加载完成 */

              image.onload = function() {

                draw();

              }

              image.src = ev.target.result

            }

          });

        }

      },

    }

  }

</script>

<style scoped>

  

</style>