Nondeterministic Programming Methodology
Need private packages and team management tools?Check out npm Teams »

vue-hammerjs-image

1.0.3 • Public • Published

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

Install

npm i vue-hammerjs-image

DownloadsWeekly Downloads

5

Version

1.0.3

License

MIT

Unpacked Size

317 kB

Total Files

14

Last publish

Collaborators

  • avatar