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

发布时间:2024-03-05 10:01

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

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

特点:

  • 兼容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 是否为弹窗模式 Boolean true
    showChooseBtn 是否显示选择图片按钮 Boolean true
    lockScroll 是否在弹窗出现时锁定页面滚动 Boolean true
    label 选择图片按钮的显示文字 String 选择图片
    boxWidth 裁剪工具宽度 Number 800
    boxHeight 裁剪工具高度 Number 400
    cutWidth 默认裁剪宽度 Number 200
    cutHeight 默认裁剪高度 Number 200
    tool 是否显示工具栏 Boolean true
    toolBgc 工具栏背景颜色 String(例: “#fff”) ‘#fff’
    sizeChange 是否能够调整裁剪框大小 Boolean true
    moveAble 是否能够调整裁剪区域位置 Boolean true
    originalGraph 是否裁剪原图 Boolean false
    crossOrigin 是否设置跨域,需要服务器做相应设置 Boolean false
    crossOriginHeader 设置跨域信息(crossOrigin 为 true 时生效) String "
    rate 裁剪图片宽高比例 String(例: “4:3”) -
    WatermarkText 水印文字 String "
    WatermarkTextFont 水印文字字体 String ‘12px Sans-serif’
    WatermarkTextColor 水印文字颜色 String ‘#fff’
    WatermarkTextX 水印文字水平位置 Number 0.95
    WatermarkTextY 水印文字垂直位置 Number 0.95
    smallToUpload 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 Boolean false
    saveCutPosition 是否保存上一次裁剪位置及大小 Boolean false
    scaleAble 是否允许滚轮缩放图片 Boolean true

    组件自定义插槽选项:

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

    组件钩子函数:

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

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

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

选择图片并裁剪需要的大小:
vue图片裁剪插件:vue-img-cutter_第1张图片
确定后,cutDown 事件获取到的图片信息:
vue图片裁剪插件:vue-img-cutter_第2张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号