stq666 / vue-cropper

A simple picture clipping plugin for vue

vue-crpopper

preview
中文

vue-cropper

install

npm install vue-cropper

use

import VueCropper from vue-cropper

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

name	toDo	default	optional
img	img url	null	url || base64 || blob
outputSize	crop produces quality of pictures	1	0.1 - 1
outputType	crop img output type	jpg (jpg need jpeg)	jpeg || png || webp
info	crop box size show	true	true || false
canScale	the scroll to scale	true	true || false
autoCrop	auto create crop box	false	true || false
autoCropWidth	auto crop box width	box size 80%	0~max
autoCropHeight	auto create crop box height	box size 80%	0~max
fixed	open crop box width height ratio	true	true | false
fixedNumber	crop box width height ratio	[1 : 1]	[w : h]

function adopt this.$refs.cropper to use

start cropper

this.$refs.cropper.startCrop()

stop cropper

this.$refs.cropper.stopCrop()

clear cropper

this.$refs.cropper.clearCrop()

get output img base64

this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

get output img blob

this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

update log

v0.13 add Real time preview

@realTime="realTime"
// Real time preview function
realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>