推荐一款基于vue的剪裁图片插件

作者: 五更月下琉璃 | 来源:发表于2020-01-06 17:13 被阅读0次

今天介绍的是一款用于裁剪图片的插件的使用，个人使用了觉得算挺方便的一款插件；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数据
    },

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