vue图片裁剪插件:vue-img-cutter

·  阅读 740

vue-img-cutter 是一个简单易用的 vue 图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求

Github:github.com/acccccccb/v…

特点:

  • 兼容IE9+,MSEdge,Chrome,Firefox
  • 两种展现形式,行内或弹窗
  • 可旋转、缩放图片
  • 任意比例、大小裁剪
  • 固定比例、大小裁剪
  • 支持远程图片裁剪、跨域设置

使用:

安装 vue-img-cutter

npm install vue-img-cutter --save-dev

在项目中使用
  • 在需要使用的页面中引入 vue-img-cutter,并注册成组件

    <script>
    //引入vue-img-cutter
    import ImgCutter from 'vue-img-cutter'
    
    export default {
        name: 'imgCutter',
        data() {
           return {
              
           }
        },
        //将vue-img-cutter注册成组件
        components:{
            ImgCutter
        }
    }
    </script>
    复制代码
  • 在页面中使用组件,并绑定 cutDown 事件,用来接收选择的图片信息

    <template>
       <div>
       	  //使用组件,并绑定cutDown事件
          <ImgCutter @cutDown="cutDown"></ImgCutter>
       </div>
    </template>
    
    <script>
    import ImgCutter from 'vue-img-cutter'
    
    export default {
        name: 'imgCutter',
        data() {
           return {
              
           }
        },
        components:{
            ImgCutter
        },
        methods: {
           //通过cutDown事件接收选择的图片信息
           cutDown(event) {
               console.log(event)
           }
        }
    }
    </script>
    复制代码

    组件参数选项:

    属性作用类型是否必填默认值
    isModal是否为弹窗模式Booleantrue
    showChooseBtn是否显示选择图片按钮Booleantrue
    lockScroll是否在弹窗出现时锁定页面滚动Booleantrue
    label选择图片按钮的显示文字String选择图片
    boxWidth裁剪工具宽度Number800
    boxHeight裁剪工具高度Number400
    cutWidth默认裁剪宽度Number200
    cutHeight默认裁剪高度Number200
    tool是否显示工具栏Booleantrue
    toolBgc工具栏背景颜色String(例: "#fff")'#fff'
    sizeChange是否能够调整裁剪框大小Booleantrue
    moveAble是否能够调整裁剪区域位置Booleantrue
    originalGraph是否裁剪原图Booleanfalse
    crossOrigin是否设置跨域,需要服务器做相应设置Booleanfalse
    crossOriginHeader设置跨域信息(crossOrigin 为 true 时生效)String"
    rate裁剪图片宽高比例String(例: "4:3")-
    WatermarkText水印文字String"
    WatermarkTextFont水印文字字体String'12px Sans-serif'
    WatermarkTextColor水印文字颜色String'#fff'
    WatermarkTextX水印文字水平位置Number0.95
    WatermarkTextY水印文字垂直位置Number0.95
    smallToUpload如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件Booleanfalse
    saveCutPosition是否保存上一次裁剪位置及大小Booleanfalse
    scaleAble是否允许滚轮缩放图片Booleantrue

    组件自定义插槽选项:

    插槽名作用
    open 或 openImgCutter页面中选择图片按钮
    choose弹窗工具中选择图片按钮
    cancel弹窗工具中取消按钮
    confirm弹窗工具中确定按钮
    ratio弹窗工具栏:宽高比例按钮
    scaleReset弹窗工具栏:重置缩放按钮
    turnLeft弹窗工具栏:向左旋转按钮
    turnRight弹窗工具栏:向右旋转按钮
    reset弹窗工具栏:重置旋转按钮
    flipHorizontal弹窗工具栏:水平翻转按钮
    flipVertically弹窗工具栏:垂直翻转按钮

    组件钩子函数:

    函数名作用类型是否必填返回值
    cutDown完成截图后执行FunctionObject
    error发生错误时执行FunctionError object
    onChooseImg选择图片后执行FunctionObject
    onPrintImg绘制图片时执行FunctionObject
    onClearAll清空画布Functionnull

    cutDown 事件接收选择的图片的信息值(返回值):

    属性描述
    fileName文件名
    filefile 类型的文件对象(IE部分版本可能不会返回)
    blobblob 类型的文件对象(IE部分版本可能不会返回)
    dataURL文件的 url 地址

选择图片并裁剪需要的大小: 在这里插入图片描述 确定后,cutDown 事件获取到的图片信息: 在这里插入图片描述

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改