Releases: zhanziyang/vue-croppa
Releases · zhanziyang/vue-croppa
v1.3.7
v1.3.6
v1.3.4
Change Log:
- Optimization: remove window.resize listener in
beforeDestroy
hook. #93 - Optimization: use CanvasRenderingContext2D.imageSmoothingQuality to output high quality image. #91
v1.3.3
Change Log:
- Support listening to native events like "click", "dbclick", "mousedown" etc.
<croppa v-model="croppa" @click="alert('clicked')"></croppa>
v1.3.2
Change Log:
- Fix #85 #83 #81
- #82 Experiment with video input: now if you set
:video-enabled=true
, you can choose a video file. If the video is supported by the browser, the first frame will be drawn on the canvas. You can play/pause the video by dbclick croppa. This feature is not fully developed yet, but you can still play around with it. For example, if you want to capture the edited video, these articles may help:
https://developers.google.com/web/updates/2016/10/capture-stream
https://developers.google.com/web/updates/2016/01/mediarecorder - Fix image positioning in fit #87
v1.3.0
Change Log:
- New props:
auto-sizing
If it is set totrue
,width
andheight
will not work. Instead, croppa will adjust itself to it's container(.croppa-container
)'s size. It's useful to make croppa's dimension responsive.
Demo: https://codepen.io/zhanziyang/pen/bvVKzL
Fix #76
v1.2.1
v1.2.0
Change Log:
-
New prop: passive
(1.2.0) Switch to passive mode. Croppa in passive mode will sync state with another croppa if they v-model the same object. Also it will not have self-control - user can't manipulate image on passive croppa. This is useful as a preview component.These states will be synced:
['imgData', 'img', 'imgSet', 'originalImage', 'naturalHeight', 'naturalWidth', 'orientation', 'scaleRatio']
-
New prop: image-border-radius
(1.2.0) Set rounded corders to image. Note that this has effect on the output image. -
New method
addClipPlugin(func)
to add clip plugin to clip the image. Example:// Add a clip plugin to make a circle clip on image onInit(vm) { this.croppa.addClipPlugin(function (ctx, x, y, w, h) { /* * ctx: canvas context * x: start point (top-left corner) x coordination * y: start point (top-left corner) y coordination * w: croppa width * h: croppa height */ ctx.beginPath() ctx.arc(x + w / 2, y + h / 2, w / 2, 0, 2 * Math.PI, true) ctx.closePath() }) },