Cbp-vue-crop NPM

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}

@infinitebrahmanuniverse/nolb-cb @everything-registry/sub-chunk-1300

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago