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.

Package Sidebar

Install

npm i vue-cutter

Weekly Downloads

2

Version

2.0.61

License

MIT

Unpacked Size

394 kB

Total Files

11

Last publish

Collaborators

  • lyuanshen