xiaofang234
<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>

分类:

技术点:

相关文章: