vue_tom_crop_image

tom-crop-image

A Vue.js project

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build
 
# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

tom-crop-image use hammerjs

on pc user should press both shift key and left mouse to rotate

step 1:install in your main.js

import TomCrop from 'vue_tom_crop_image'
Vue.use(TomCrop)

step 2:use in your component

<tom-crop
:data-show='showCrop'
:data-width='400'
:data-height='200'
@on-success='getCropSuccess'
@on-hide='showCrop=false'
></tom-crop>
 
// methods
 getCropSuccess(detail){
    console.log('img src for base64',detail.base64);
    detail.dfd.done(function(blob){
      console.log('img for blob file',blob);
    })
 }