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>

属性

参数	说明	类型	可选值	默认值
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.