rzl / vue-hammerjs-image

vue-hammerjs-image 一个使用hammerjs-image做的vue插件 可以在前端进行图片 旋转 缩放 平移然后进行等比裁剪

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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数据
ezoic increase your site revenue

About

vue-hammerjs-image 一个使用hammerjs-image做的vue插件 可以在前端进行图片 旋转 缩放 平移然后进行等比裁剪


Languages

Language:Vue 62.6%Language:JavaScript 34.5%Language:HTML 2.9%