vue-hammerjs-image

A Vue.js project for hammerjs-image

项目相关

hammerjs-image

hammerjs-image 在线演示DEMO

vue-hammerjs-image 在线演示DEMO

vue-hammerjs-image-test

build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

install

npm install -S vue-hammerjs-image

Use 1

import VueHammerjsImage from 'vue-hammerjs-image/src/vue-hammerjs-image/vue-hammerjs-image.vue'

export default {
  components: {
    VueHammerjsImage
  }
}

Use 2

import VueHammerjsImage from 'vue-hammerjs-image'

Vue.use(VueHammerjsImage) 

属性

| 属性 | 描述 | demo | | -------- | -----: | :----: | | img | 字符串，图片路径/base64 | src/logo.png | | targetWidth | 操作区域宽度 | 100 | | targetHeight | 操作区域高度 | 200 | | translate3dInfo | 裁剪参数 | {rotation: 0, scale: 1, offset_x: 0, offset_y: 0} | | maxScale | 最大放大数 | 2 | | minScale | 最小缩小数 | 0.5 | | backgroundColor | 操作区域的背景色，不影响裁剪后的图片 | black |

translate3dInfo属性

| translate3dInfo属性 | 描述 | demo | | -------- | -----: | :----: | | rotation | 旋转角度0~360 | 0 | | scale | 放大缩小 | | | offset_x | 偏移x | 5 | | offset_y | 偏移Y | 5 |

方法

| 方法 | 描述 | | -------- | -----: | | getHi | 返回hammerjs-image对象 | | setTranslate3dInfoPreview | 设置裁剪参数translate3dInfo并预览 | | setTranslate3dInfo | 设置裁剪参数translate3dInfo不预览 | | translate3d | 根据设定的参数进行裁剪返回canvas | | getBase64 | 返回裁剪后的base64数据 |