移動端上傳圖片（引入exif-js,圖片被壓縮爲base64）

<template>
  <div class="vue-box">
    <img :src="imgUrl" alt="" id="img">
    <input type="file" class="file" accept="image/png,image/jpg,image/jpeg" @change="change($event)">
  </div>
</template>
<script>
  import Cropper from 'cropperjs';
  import Exif from 'exif-js';

  export default {
    props: {
      // 定義的寬高比
      widthRate: {
        type: Number,
        default: NaN
      },
      // 定義的寬高比
      heightRate: {
        type: Number,
        default: 1
      },
      imgUrl: {
        type: String,
        default: function () {
          return '';
        }
      }
    },
    data() {
      return {};
    },
    methods: {
      change(event) {
        let image = document.getElementById('img'); // 預覽對象
        this.clip(event, {
          resultObj: image,
          aspectWithRatio: Number(this.widthRate),
          aspectHeightRatio: Number(this.heightRate)
        });
      },
      // 初始化方法
      initilize(opt) {
        let self = this;
        this.options = opt;
        // 建立dom
        this.createElement();
        this.resultObj = opt.resultObj;
        // 初始化裁剪對象
        this.cropper = new Cropper(this.preview, {
          aspectRatio: opt.aspectWithRatio / opt.aspectHeightRatio,
          // aspectRatio: 1/1,
          autoCropArea: opt.autoCropArea || 0.8,
          viewMode: 2,
          guides: true,
          cropBoxResizable: true, // 是否經過拖動來調整剪裁框的大小
          cropBoxMovable: true, // 是否經過拖拽來移動剪裁框。
          dragCrop: false,
          dragMode: 'move', // ‘crop’: 能夠產生一個新的裁剪框3 ‘move’: 只能夠移動3 ‘none’: 什麼也不處理
          center: true,
          zoomable: true, // 是否容許放大圖像。
          zoomOnTouch: true, // 是否能夠經過拖動觸摸來放大圖像。
          scalable: true,
          // minCropBoxHeight: 750,
          // minCropBoxWidth: 750,
          background: false,
          checkOrientation: true,
          checkCrossOrigin: true,
          zoomOnWheel: false,
          toggleDragModeOnDblclick: false,
          ready: function () {
            // console.log(self.cropper.rotate(90))
            if (opt.aspectRatio === 'Free') {
              let cropBox = self.cropper.cropBox;
              cropBox.querySelector('span.cropper-view-box').style.outline = 'none';
              self.cropper.disable();
            }
          }
        });
      },
      // 建立一些必要的DOM，用於圖片裁剪
      createElement() {
        // 初始化圖片爲空對象
        this.preview = null;
        // <img src="../../assets/app/loading.gif">
        let str = '<div><img id="clip_image" src="originUrl"></div><button type="button" id="cancel_clip">取消</button><button type="button" id="clip_button">肯定</button>';
        str += '<div class="crop_loading"><div class="crop_content"><div class="crop_text">圖片修剪中...</div></div></div>';
        str += '<div class="crop_success"><div class="crop_success_text">上傳成功</div></div></div>';

        let body = document.getElementsByTagName('body')[0];
        this.reagion = document.createElement('div');
        this.reagion.id = 'clip_container';
        this.reagion.className = 'container';
        this.reagion.innerHTML = str;
        // 添加建立好的DOM元素
        body.appendChild(this.reagion);
        this.preview = document.getElementById('clip_image');

        // 綁定一些方法
        this.initFunction();
      },
      // 初始化一些函數綁定
      initFunction() {
        let self = this;
        this.clickBtn = document.getElementById('clip_button');
        this.cancelBtn = document.getElementById('cancel_clip');
        // 肯定事件
        this.addEvent(this.clickBtn, 'click', function () {
          self.crop();
        });
        // 取消事件
        this.addEvent(this.cancelBtn, 'click', function () {
          self.destoried();
        });
        // 清空input的值
        this.addEvent(this.fileObj, 'click', function () {
          this.value = '';
        });
      },
      // 外部接口，用於input['file']對象change時的調用
      clip(e, opt) {
        this.fileObj = e.srcElement;

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

        if (!files.length) return false; // 不是圖片直接返回

        // 調用初始化方法
        this.initilize(opt);

        // 獲取圖片文件資源
        this.picValue = files[0];

        // 去獲取拍照時的信息，解決拍出來的照片旋轉問題
        // Exif.getData( files[0] , function(){
        //   self.Orientation = Exif.getTag( files[0], 'Orientation');
        //   console.log(self.Orientation)
        // });
        // 調用方法轉成url格式
        this.originUrl = this.getObjectURL(this.picValue);

        // 每次替換圖片要從新獲得新的url
        if (this.cropper) {
          this.cropper.replace(this.originUrl);
        }
      },
      // 圖片轉碼方法
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL !== undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
      },
      // 點擊肯定進行裁剪
      crop() {
        let self = this;
        let image = new Image();
        let croppedCanvas;
        let roundedCanvas;

        // Crop
        document.querySelector('.crop_loading').style.display = 'block';

        setTimeout(function () {
          croppedCanvas = self.cropper.getCroppedCanvas();
          // Round
          roundedCanvas = self.getRoundedCanvas(croppedCanvas);

          let imgData = roundedCanvas.toDataURL();
          image.src = imgData;

          // 判斷圖片是否大於100k,不大於直接上傳，反之壓縮
          if (imgData.length < (100 * 1024)) {
            self.resultObj.src = imgData;
            // 圖片上傳
            self.postImg(imgData);
          } else {
            image.onload = function () {
              // 壓縮處理
              let data = self.compress(image, self.Orientation);
              self.resultObj.src = data;
              // 圖片上傳
              self.postImg(data);
            };
          }
        }, 20);
      },
      // 獲取裁剪圖片資源
      getRoundedCanvas(sourceCanvas) {
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        let width = sourceCanvas.width;
        let height = sourceCanvas.height;

        canvas.width = width;
        canvas.height = height;

        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.rect(0, 0, width, height);
        context.fill();

        return canvas;
      },
      // 銷燬原來的對象
      destoried() {
        // 移除事件
        this.removeEvent(this.clickBtn, 'click', null);
        this.removeEvent(this.cancelBtn, 'click', null);
        this.removeEvent(this.fileObj, 'click', null);
        // 移除裁剪框
        this.reagion.parentNode.removeChild(this.reagion);

        // 銷燬裁剪對象
        this.cropper.destroy();
        this.cropper = null;
      },
      // 圖片上傳
      postImg(imageData) {
        // console.log(imageData)
        this.$emit('callback', imageData);
        // 這邊寫圖片的上傳
        let self = this;
        self.destoried();

        // window.setTimeout( function () {
        //   document.querySelector('.crop_loading').style.display = 'none';
        //   document.querySelector('.crop_success').style.display = 'block';
        //   //裁剪完後摧毀對象
        //     self.destoried();
        // },3000)
      },
      // 圖片旋轉
      rotateImg(img, direction, canvas) {
        // 最小與最大旋轉方向，圖片旋轉4次後回到原方向
        const minStep = 0;
        const maxStep = 3;
        if (img == null) return;
        // img的高度和寬度不能在img元素隱藏後獲取，不然會出錯
        let height = img.height;
        let width = img.width;
        let step = 2;
        if (step == null) {
          step = minStep;
        }
        if (direction === 'right') {
          step++;
          // 旋轉到原位置，即超過最大值
          step > maxStep && (step = minStep);
        } else {
          step--;
          step < minStep && (step = maxStep);
        }
        // 旋轉角度以弧度值爲參數
        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;
        }
      },
      // 圖片壓縮
      compress(img, Orientation) {
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        // 瓦片canvas
        let tCanvas = document.createElement('canvas');
        let tctx = tCanvas.getContext('2d');
        let initSize = img.src.length;
        let width = img.width;
        let height = img.height;

        // 若是圖片大於四百萬像素，計算壓縮比並將大小壓至400萬如下
        let ratio;
        if ((ratio = width * height / 4000000) > 1) {
          console.log('大於400萬像素');
          ratio = Math.sqrt(ratio);
          width /= ratio;
          height /= ratio;
        } else {
          ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        //        鋪底色
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 若是圖片像素大於100萬則使用瓦片繪製
        let count;
        if ((count = width * height / 1000000) > 1) {
          count = ~~(Math.sqrt(count) + 1); // 計算要分紅多少塊瓦片
          //            計算每塊瓦片的寬和高
          let nw = ~~(width / count);
          let nh = ~~(height / count);
          tCanvas.width = nw;
          tCanvas.height = nh;
          for (let i = 0; i < count; i++) {
            for (let j = 0; j < count; j++) {
              tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
              ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
            }
          }
        } else {
          ctx.drawImage(img, 0, 0, width, height);
        }
        // 修復ios上傳圖片的時候 被旋轉的問題
        if (Orientation !== '' && Orientation !== 1) {
          switch (Orientation) {
            case 6: // 須要順時針（向左）90度旋轉
              this.rotateImg(img, 'left', canvas);
              break;
            case 8: // 須要逆時針（向右）90度旋轉
              this.rotateImg(img, 'right', canvas);
              break;
            case 3: // 須要180度旋轉
              this.rotateImg(img, 'right', canvas); // 轉兩次
              this.rotateImg(img, 'right', canvas);
              break;
          }
        }
        // 進行最小壓縮
        // let ndata = canvas.toDataURL( 'image/jpeg' , 0.1);
        let ndata = canvas.toDataURL('image/png', 0.1);
        console.log('壓縮前：' + initSize);
        console.log('壓縮後：' + ndata.length);
        console.log('壓縮率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%');
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

        return ndata;
      },
      // 添加事件
      addEvent(obj, type, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(type, fn, false);
        } else {
          obj.attachEvent('on' + type, fn);
        }
      },
      // 移除事件
      removeEvent(obj, type, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(type, fn, false);
        } else {
          obj.detachEvent('on' + type, fn);
        }
      }
    }
  };
</script>
<style scoped>

</style>
<style>
  .vue-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0.4rem;
  }

  .vue-box .file {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 99;
    cursor: pointer;
  }

  img {
    display: none;
    width: 100%;
    height: 100%;
  }

  h3 {
    text-align: center;
  }

  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  img {
    /*display: block;*/
    /*margin: 0 auto;*/
  }

  input[type='file'] {
    outline: none;
    /*margin-top: 20px;*/
  }

  * {
    margin: 0;
    padding: 0;
  }

  #clip_button {
    position: absolute;
    right: 10%;
    bottom: 20px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 2px;
    background: #1AAD19;
    color: #fff;
  }

  #cancel_clip {
    position: absolute;
    left: 10%;
    bottom: 20px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 2px;
    color: #fff;
    background: #E64340;
  }

  #clip_container.container {
    z-index: 99999;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
  }

  #clip_container.container > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #clip_image {
    max-width: 100%;
  }

  .cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .crop_loading,
  .crop_success {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
  }

  .crop_loading .crop_content {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #000;
    opacity: 0.9;
    height: 66px;
    width: 140px;
    vertical-align: middle;
    color: #fff;
    padding-top: 20px;
    font-size: 16px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .crop_loading .crop_content img {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .crop_success .crop_success_text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #000;
    opacity: 0.9;
    width: 120px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    font-size: 16px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  .cropper-modal {
    opacity: .5;
    background-color: #000;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;

    display: block;

    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;

    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;

    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;

    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {

    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {

    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {

    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
  }

  .cropper-hide {
    position: absolute;

    display: block;

    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }
</style>

複製代碼