vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.

Features

• Straightforward: What you see is what you get
• Highly customizable: You can almost customize anything except the core functionalities
• Mobile-friendly: Supports drag to move and pinch with two fingers to zoom on mobile devices
• EXIF orientation: v0.2.0+ Support correctly show image with EXIF orientation

Browser Support

• IE 10+
• Firefox 3.6+
• Chrome 6+
• Safari 6+
• Opera 11.5+
• iOS Safari 6.1+
• Android Browser 3+

Template Example

<croppa v-model="myCroppa"
        :width="400"
        :height="400"
        :canvas-color="'default'"
        :placeholder="'Choose an image'"
        :placeholder-font-size="0"
        :placeholder-color="'default'"
        :accept="'image/*'"
        :file-size-limit="0"
        :quality="2"
        :zoom-speed="3"
        :disabled="false"
        :disable-drag-and-drop="false"
        :disable-click-to-choose="false"
        :disable-drag-to-move="false"
        :disable-scroll-to-zoom="false"
        :disable-rotation="false"
        :prevent-white-space="false"
        :reverse-scroll-to-zoom="false"
        :show-remove-button="true"
        :remove-button-color="'red'"
        :remove-button-size="0"
        :initial-image="'path/to/initial-image.png'"
        @init="handleCroppaInit"
        @file-choose="handleCroppaFileChoose"
        @file-size-exceed="handleCroppaFileSizeExceed"
        @file-type-mismatch="handleCroppaFileTypeMismatch"
        @new-image-drawn="handleNewImage"
        @image-remove="handleImageRemove"
        @move="handleCroppaMove"
        @zoom="handleCroppaZoom"></croppa>

NOTE: This is an almost-full-use example. Usually you don't need to specify so many props, because they all have default values. Most simply, you can even do:

<croppa v-model="myCroppa"></croppa>

Method Examples

this.myCroppa.remove();

this.myCroppa.zoomIn();

alert(this.myCroppa.generateDataUrl());

Quick Start

1. Import vue-croppa into your vue.js project.

Using build tools:

npm install --save vue-croppa

import Vue from 'vue';
import Croppa from 'vue-croppa';

Vue.use(Croppa);

// If your build tool supports css module
import 'vue-croppa/dist/vue-croppa.css';

Not using build tools:

<link href="https://unpkg.com/vue-croppa/dist/vue-croppa.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue-croppa/dist/vue-croppa.min.js"></script>

Vue.use(Croppa);

2. Now you have it. The simplest usage:

<croppa v-model="myCroppa"></croppa>

new Vue({
  // ... other vm options omitted
  data: {
    myCroppa: {}
  },

  methods: {
    uploadCroppedImage() {
      this.myCroppa.generateBlob(
        blob => {
          // write code to upload the cropped image file (a file is a blob)
        },
        'image/jpeg',
        0.8
      ); // 80% compressed jpeg file
    }
  }
});

Live example: https://jsfiddle.net/jdcvpvty/2/

NOTE:

• Since v0.1.0, you can change the default component name to anything you want.

import Vue from 'vue';
import Croppa from 'vue-croppa';

Vue.use(Croppa, { componentName: 'my-image-cropper' });

<my-image-cropper v-model="myCroppa"></my-image-cropper>

• Since v0.1.1, you can get the component object with Croppa.component. This is useful when you want to register the component by yourself manually.

Vue.component('croppa', Croppa.component);

// Register async component (Webpack 2 + ES2015 Example). More about async component: https://vuejs.org/v2/guide/components.html#Async-Components
Vue.component('croppa', () => import(Croppa.component));

• Since v1.0.0, the v-modeled value and the ref both point to the same thing - the component itself. So you don't need to set v-model anymore if you have a ref on the component.

<croppa ref="myCroppa"></croppa>

this.$refs.myCroppa.chooseFile();
this.$refs.myCroppa.generateDataUrl();
// ...

Documentation