vue 裁剪圖片

寫項目遇到了一個裁剪圖片的功能，然后對裁剪的圖片進行打印，記錄一下裁剪的思路和方法。

 

第一步，安裝cropperjs插件：

yarn install cropperjs

下載 npm install vue-cropper --save

安裝npm install vue-cropper

 

第二步：對裁剪進行樣式布局：

<button type="primary" @click="openBtn()"/>    //開始裁剪按鈕

<img src="../assets/images/search/close.png" @click="cancelBtn()"/> //取消裁剪按鈕

<img src="../assets/images/search/sure.png" @click="determineBtn()"/> //確定裁剪按鈕 <div class="Tailoring" id="printTest"> <img style="width: 100%;height: 100%;" :src="cropImg" alt="圖片"> //裁剪后的圖片
</div>

 

第三步：對js進行配置屬性

 

data(){
return{
 option: {
        img: '', // 裁剪圖片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成圖片的質量
        outputType: 'jpeg', // 裁剪生成圖片的格式
        canScale: false, // 圖片是否允許滾輪縮放
        autoCrop: false, // 是否默認生成截圖框
        // autoCropWidth: 300, // 默認生成截圖框寬度
        // autoCropHeight: 200, // 默認生成截圖框高度
        fixedBox: false, // 固定截圖框大小 不允許改變
        fixed: false, // 是否開啟截圖框寬高固定比例
        //fixedNumber: [7, 5], // 截圖框的寬高比例
        full: true, // 是否輸出原圖比例的截圖
        canMoveBox: true, // 截圖框能否拖動
        original: false, // 上傳圖片按照原始比例渲染
        centerBox: false, // 截圖框是否被限制在圖片里面
        infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
      },
      cropImg: null,
}

 

第四步，寫回執圖片，開始裁剪，取消裁剪，以及確定裁剪的點擊事件：

 

 //繪制圖片

  drawImg(href) {
      this.$nextTick(() => {
        let canvas = document.getElementById('cropper')
        if (canvas) {
          canvas.width = 720
          canvas.height = 480
          let ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          let img = new Image()
          img.crossOrigin = 'Anonymous'
          img.src = href || cropper
          img.onload = function () {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          }
        }
      })
    },

 

//開始裁剪點擊事件

 
openBtn（）{
 this.option.autoCrop = true;    //顯示裁剪框
 this.$refs.cropper.refresh();    
}

//取消裁剪點擊事件

  cancelBtn() {
      this.$refs.cropper.clearCrop();  //清除截圖
      this.cropImg = "";               //清空截圖看圖片
    },

 //確定裁剪點擊事件

 determineBtn() {
      let _this = this
      this.$refs.cropper.getCropBlob(data => {
        var href = window.URL.createObjectURL(data);this.cropImg = href;
      })
      console.log(href);
      this.cancelCropper()
    },

 

  裁剪有幾種方法，我用的是其中的一種，具體的可以查看：https://my729.github.io/picture-crop-demo/dist/index.html。

 

  對弈裁剪的一些配置， 我只是針對我寫的功能的需要做了一些配置，具體的配置有：

 

 

      以及內置方法的調用：

  

        this.$refs.cropper.startCrop() 開始截圖

       this.$refs.cropper.stopCrop() 停止截圖

       this.$refs.cropper.clearCrop() 清除截圖

       this.$refs.cropper.changeScale() 修改圖片大小 正數為變大 負數變小

       this.$refs.cropper.getImgAxis() 獲取圖片基於容器的坐標點

       this.$refs.cropper.getCropAxis() 獲取截圖框基於容器的坐標點

      this.$refs.cropper.goAutoCrop 自動生成截圖框函數

      this.$refs.cropper.rotateRight() 向右邊旋轉90度

      this.$refs.cropper.rotateLeft() 向左邊旋轉90度

 

 

 

   更加詳細的配置可以參考官網給的配置：https://github.com/xyxiao001/vue-cropper