Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 2.23 KB

README.md

File metadata and controls

85 lines (65 loc) · 2.23 KB
Raw

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数据