vue-cropper

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)  
})