vue-cutter

    2.0.61 • Public • Published

    vue license license

    简介

    • 基于vuejavascript开发的一款图片剪裁处理工具
    • 优点:原生、轻量、使用简单、功能全面、扩展性强
    • 目前功能:支持旋转、缩放、平移,固定比例,固定尺寸
    • 支持 PC端移动端
    • 关于缩放:鼠标(鼠标滚轮缩放), 移动端双指缩放

    在线预览

    demo : https://lyuanshen.github.io/vue-cutter/

    使用方法

    安装

    // npm 安装
    npm install vue-cutter --save
    
    // yarn 安装
    yarn add vue-cutter --save
    

    用法

    // main.js里面使用
    import VueCutter from 'vue-cutter'
    Vue.use(VueCutter)
     
    // 组件内使用
    import { VueCutter } from 'vue-cutter'
    components: { VueCutter }
    <template>
      <div>
        <vue-cutter
          :container-bounding="options.bounding"
          :src="options.src"
          :output-type="options.outputType"
        ></vue-cutter>
      </div>
    </template>
     
    <script>
      export default {
        name: "App",
        data() {
          return{
            options: {
              bounding: '500px 300px',
              src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4110377719,1460950412&fm=26&gp=0.jpg',
              outputType: 'png'
            }
          }
        }
      }
    </script>

    属性

    参数 说明 类型 可选值 默认值
    containerBounding 插件容器的宽高(必填) String '450px 300px' | '45% 30%' | '450px' | '45%' | '450' 空 || 字符串可以有两个或一个参数,两个参数时分别为容器的宽高,一个参数时容器的宽高同为参数
    src 裁剪图片的地址 String url 地址 | base64 | blob
    mode 图片默认渲染方式 String contain | cover | 100px, 100% auto | original contain
    outputType 裁剪生成图片的格式 String jpeg | png | webp | jgif jpeg
    highQuality 输出高清的图片 Boolean true | false false
    canImgMoved 是否能移动图片 Boolean true | false true
    canImgScale 图片是否允许缩放 Boolean true | false true
    cropBoxBounding 裁剪框宽高 String auto || 200 || 200px || 200px 200px || 50% 等 auto (图片宽高的80%)
    canCropMove 是否能移动裁剪框 Boolean true | false true
    canCropOverImg 裁剪框是否被限制在图片里面 Boolean true | false true
    fixed 裁剪款的宽高比 [Array, String] auto | [4, 3] 等 默认为空,不开启宽高比;值 `auto` 时 为源图片的宽高比,数组时为两数比
    canCropResized 裁剪框是否允许缩放 Boolean true | false true
    cropDividingLine 裁剪框内的分割线 Boolean true | false false
    cropInfo 是否开启显示裁剪宽的宽高比 Boolean true | false false

    内置方法

    通过 ref$refs 调用
    // 在标签上添加 ref= "cutter"
    <vue-cutter
       ref="cutter"
     >
    </vue-cutter>
    方法 说明
    this.$refs.cutter.addLocalImage() 添加本地要裁剪的图片
    this.$refs.cutter.relativeZoom(param) 对图片进行缩放,正数为放大,负数为缩小
    this.$refs.cutter.rotateLeft() 图片逆时针旋转 90 度
    this.$refs.cutter.rotateRight() 图片顺时针旋转 90 度
    this.$refs.cutter.rotateClear() 清除旋转
    this.$refs.cutter.getImgAxis() 获取图像的轴
    this.$refs.cutter.getCropAxis() 获取裁剪框的轴
    this.$refs.cutter.getBase64Data(funtion) 获取 base64 格式的图片
    this.$refs.cutter.getBlobData(funtion) 获取 blob 格式的图片
     
    //获取 base64 格式的图片
    this.$refs.cutter.getBase64Data(data => {
      console.log(data)
    })
     
    //获取 blob 格式的图片
    this.$refs.cutter.getBlobData(data => {
       console.log(data)
    })

    钩子函数:

    图片实时预览函数 @preview
    <vue-cutter
       @preview="preview"
     >
    </vue-cutter>
    // data
    data(){
       return{
         html: ''
      }
    }
     
    // method
    preview(data) {
       const { html } = data;
       this.html = html;
    }
     
    // html
    <div v-html="html"></div>

    License

    Released under the MIT License.

    Install

    npm i vue-cutter

    DownloadsWeekly Downloads

    2

    Version

    2.0.61

    License

    MIT

    Unpacked Size

    394 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar