今天介紹的是一款用于裁剪圖片的插件的使用，個人使用了覺得算挺方便的一款插件；vue-image-cutter
先看效果圖

TIM圖片20200106170151.png

TIM圖片20200106170222.png

安裝

npm install vue-img-cutter --save-dev  
//或者淘寶鏡像
cnpm install vue-img-cutter --save-dev

頁面引入

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
}

這是我的配置

//html部分
     <ImgCutter
        :boxWidth="800"
        :boxHeight="400"
        :cutWidth="450"
        :cutHeight="240"
        :sizeChange="false"
        v-on:cutDown="cutDown"
      ></ImgCutter>
//方法部分
cutDown: function (res) {
      let imgSrc = res.dataURL;
      console.log(imgSrc);//輸出為base64數(shù)據(jù)
    },

插件作者項目地址：
https://github.com/acccccccb/vue-img-cutter