cbp-vue-crop

Simple and beauty Image Cropper for Vue

Install

npm install -s cbp-vue-crop

Usage

 
<template>
    ....
    <cbp-vue-crop ref="cbpVueCrop" :options="options" :img="img"></cbp-vue-crop>
    ....
</template>
 
<script>
  import cbpVueCrop from '../src/cbp-vue-crop.vue'
  ....
  export default {
    ....
    components: { cbpVueCrop },
    ....
    methods: {
      ....
      onCrop() {
        ....
        let crop = this.$refs.cbpVueCrop.crop();
        ....
      }
      ....
    }
    ....
  }
</script>
 
 

Demo

Soon

Development Setup

# install dependencies 
$ npm install
 
# dev mode 
$ npm run dev
 
# test 
$ npm run test
 
# build 
$ npm run build

Parameters

options

Object

Option	Description	Type	Default
isCirclePicker	is picker area circle	boolean	true
containerSize	container size example: {width:900, height:700} or 600	object/number	600
pickerSize	container size example: {width:400, height:200} or 300	object/number	300
initialScale	initial scale of picker	number	1
stuck	if its true you cann't drag or scale image from picker area	boolean	true
minScale	minimal scale of picker, if stuck option is true, this options won't be used	number	0.2
maxScale	maximal scale of picker	number	2
stepScale	step of scale	number	0.0001
scaleStyle	vue style of scale	object	{}
containerStyle	vue style of container	object	{}
pickerStyle	vue style of picker	object	{}
backgroundColor	background color of container	string	'#333333'

img

String

Url to image wich u want to crop

Methods

Method	Description	Return Type	Example
crop	crop return coordinates of top left corner and bottom right corner	array	[{x:12, y:34}, {x: 567, y:890}]