Vue Croppa Versions Save

Change Log:

• Bug fixing: #124 #111

Change Log:

• Fix #97 #98

Change Log:

• Optimization: remove window.resize listener in beforeDestroy hook. #93
• Optimization: use CanvasRenderingContext2D.imageSmoothingQuality to output high quality image. #91

Change Log:

• Support listening to native events like "click", "dbclick", "mousedown" etc.

<croppa v-model="croppa" @click="alert('clicked')"></croppa>

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

Change Log:

• New props: auto-sizing If it is set to true, width and height 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

Change Log:

Merge #74: return false instead of throwing error when the selected file is invalid.

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']
  

  Fix #68 Demo

• New prop: image-border-radius (1.2.0) Set rounded corders to image. Note that this has effect on the output image.

  Fix #67 Demo

• 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()
    })
  },
  

  Demo

Change Log:

• Fix typo that causes file-type-mismatch event not working properly. (#56)

Change Log:

• A new prop: replace-drop. If :replace-drop="true", current image will be replaced by the new one on drag and drop (By default you need to remove the current image to drop a new one). For backward compatibility, it's default value is false. #53
• Fixed "window is not defined" error on SSR. #52