基於vue的h5實現圖片裁剪功能(cropperjs)

今天做項目遇到需要做圖片裁剪功能的，於是就上網找了一下資料，發現cropperjs這個用的比較多，所以就用了這個

主要內容：

<template>
    <div class="hello">
        <img src="./assets/upload.png" alt="" id="img">
        <input type="file" accept="image/jpeg,image/png,image/jpeg" @change="change($event)">
    </div>
</template>

<script>
export default{
  data(){
    return{

    }
  }, 
  methods:{
    change(event){
      let image=document.getElementById('img');
      this.clip(event,{
        resultObj:image,
        aspectRatio:1,
      })
    }
  }
}
</script>

新建一個js文件用於存放處理方法

import Cropper from 'cropperjs'
import Exif from 'exif-js'
export default {
  install( Vue ){
    //初始化方法
    Vue.prototype.initilize = function( opt ){
      let self = this;
      this.options = opt;
      //創建dom
      this.createElement();
      this.resultObj = opt.resultObj;
      //初始化裁剪對象
      this.cropper = new Cropper( this.preview , {
        aspectRatio : opt.aspectRatio || 1 ,
        autoCropArea : opt.autoCropArea || 0.8 ,
        viewMode : 1,
        guides : opt.aspectRatio == 'Free' ? false : true ,
        cropBoxResizable : opt.aspectRatio == 'Free' ? false : true ,
        cropBoxMovable : opt.aspectRatio == 'Free' ? false : true ,
        dragCrop : opt.aspectRatio == 'Free' ? false : true ,
        background : false,
        checkOrientation : true ,
        checkCrossOrigin : true ,
        zoomable : false,
        zoomOnWheel : false ,
        center : 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，用於圖片裁剪
    Vue.prototype.createElement = function () {
      //初始化圖片為空對象
      this.preview = null;

      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"><img src="../static/loading.gif"><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();
    }
    //初始化一些函數綁定
    Vue.prototype.initFunction = function  () {
      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時的調用
    Vue.prototype.clip = function ( e , opt ) {
      let self = this;

      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);
      }

    }
    //圖片轉碼方法
    Vue.prototype.getObjectURL = function(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 ;
    }
    //點擊確定進行裁剪
    Vue.prototype.crop  = function () {
      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)
    }
    //獲取裁剪圖片資源
    Vue.prototype.getRoundedCanvas = function(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;
    }
    //銷毀原來的對象
    Vue.prototype.destoried = function () {
      let self = this;
      //移除事件
      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;
    }
    //圖片上傳
    Vue.prototype.postImg = function( 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)
    }

    //圖片旋轉
    Vue.prototype.rotateImg = function( 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;
      }
    }

    //圖片壓縮
    Vue.prototype.compress = function ( 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);
      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;
    }

    //添加事件
    Vue.prototype.addEvent = function ( obj , type , fn ) {
      if( obj.addEventListener ){
        obj.addEventListener( type , fn , false );
      }else{
        obj.attachEvent( 'on' + type , fn );
      }
    }
    //移除事件
    Vue.prototype.removeEvent = function ( obj , type , fn ) {
      if( obj.removeEventListener ){
        obj.removeEventListener( type , fn , false );
      }else{
        obj.detachEvent( 'on' + type , fn );
      }
    }
  }
}

官網使用個人覺得解釋不明顯，沒有找到api，覺得這里的說明還比較多一點：https://blog.csdn.net/qq727013465/article/details/51823231

github地址：https://fengyuanchen.github.io/cropperjs/

部分機型可能存在圖片旋轉的問題，可以參考exif.js

github地址：https://github.com/exif-js/exif-js