vue-cutter

简介

• 基于vue和javascript开发的一款图片剪裁处理工具
• 优点：原生、轻量、使用简单、功能全面、扩展性强
• 目前功能：支持旋转、缩放、平移，固定比例，固定尺寸
• 支持 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>

属性

内置方法

通过 ref 和 $refs 调用

// 在标签上添加 ref= "cutter"
<vue-cutter
   ref="cutter"
 >
</vue-cutter>

//获取 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.