Vue.js image clipping components using Vue-Rx.

• Add image clipping components to your Vue application in nothing flat.
• Touch devices supported and fully responsive.

You can find the source code of examples under examples branch.

• Live demo & examples
• Quick Start
• Try it on codepen
• README
• vuejs-clipper wiki

• Notice
• Installation (NPM & ESM)
• Installation (Script)
• Components
• Changelog

Before using the plugin & components, here's something you should know :

• It's based on vue-rx.
• rxjs and vue-rx are required as peer dependencies.
• Components are responsive base on width instead of height, see Component Layout.
• You can clip your own images (local uploaded images or images served on your site), but you cannot clip a cross-origin image unless the image server set the CORS headers.
• Components' input is an image URL, output is a canvas element, they only help you clip images to canvas, you need to handle other things like transform file input to image URL or transform output canvas to image by yourself.

Install vuejs-clipper

npm install vuejs-clipper --save

Install peer dependencies if you haven't.

npm install vue-rx rxjs --save

Vuejs-clipper is based on vue-rx, so make sure you have vue-rx plugin installed.

import Vue from 'vue'
import VueRx from 'vue-rx'
// install vue-rx
Vue.use(VueRx)

Make sure to install vue-rx plugin first.

import Vue from "vue";
import VueRx from "vue-rx";
// Use build files
import VuejsClipper from "vuejs-clipper/dist/vuejs-clipper.umd";
import "vuejs-clipper/dist/vuejs-clipper.css";

Vue.use(VueRx);
Vue.use(VuejsClipper);

You are using vuejs-clipper directly with your build proccess(webpack etc).

So make sure you have css loader, ex: sass-loader, if you haven't installed :

npm install -D sass-loader node-sass

import Vue from 'vue'
import VueRx from 'vue-rx'
import VuejsClipper from 'vuejs-clipper'
// install vue-rx
Vue.use(VueRx)
// install vuejs-clipper
Vue.use(VuejsClipper)

By default vuejs-clipper plugin will register all components to Vue global scope.

register some components to global with default component name

Vue.use(VuejsClipper, {
　components: {
    clipperBasic: true,
    clipperPreview: true
　}
})

with customized component name

Vue.use(VuejsClipper, {
　components: {
　　clipperBasic: 'image-clipper-basic',
　　clipperPreview: 'my-preview'
　}
})

not register any components, but with some plugin options

Vue.use(VuejsClipper, {
  components: null,
　parentPropName: 'myCustomerName'
  /*
  　parentPropName:
    Vuejs-clipper Adds property to Vue instance in order to store `clipper-preview` list.
    You can change the property name
    default: '_imgPreviewLists'
  */
})

import Vue from 'vue'
import VueRx from 'vue-rx'
// install vue-rx
Vue.use(VueRx)

then import in your components (SFC)

import { clipperBasic, clipperPreview } from 'vuejs-clipper'

export default {
  components: {
    clipperBasic,
    clipperPreview
  }
}

Include vuejs-clipper umd script after Vue.js.

<!-- rxjs-->
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- vue-rx-->
<script src="https://unpkg.com/[email protected]/dist/vue-rx.js"></script>
<!--vuejs-clipper script & style -->
<script src="./dist/vuejs-clipper.umd.min.js"></script>
<link rel="stylesheet" href="./dist/vuejs-clipper.css">

Use in html/template

<clipper-basic src="example.jpg"></clipper-basic>

• clipperBasic
• clipperFixed
• clipperPreview
• clipperUpload
• clipperRange

See detail examples.

an image clipping component

import { clipperBasic } from 'vuejs-clipper'

• Props

For more detail about the layout settings, pleases see Component layout in depth.

• Methods

clip() arguments

Resulting-canvas-size

set ref to use component methods

<clipper-basic ref="clipper" />

in your Vue instance methods

const canvas = this.$refs.clipper.clip()

• Event

usage :

<clipper-basic @error="errorCb" @load="loadCb" />

• Data

usage :

this.$refs.clipper.imgRatio
this.$refs.clipper.zoomWH$.width

• Slot

<clipper-basic src="">
  <div slot="placeholder">No image</div>
</clipper-basic>

• rxjs Subject

usage:

this.$refs.clipper.setTL$.next({ left: 0, top: 0 }) // percentage 0%
this.$refs.clipper.setTL$.next({ right: 0, bottom: 10 })
this.$refs.clipper.setWH$.next({ width: 100, height: 100 }) // percentage 100%

this.$refs.clipper.onChange$.subscribe(() => {
  // This happens whenever zooming, moving and rotating occur.
})

an image clipping component

import { clipperFixed } from 'vuejs-clipper'

• Props

• Method

clip() arguments

• Event

• Data

• Slot

• rxjs Subject

usage:

this.$refs.clipper.setTL$.next({ left: 50, top: 50 }) // percentage 0%
this.$refs.clipper.setWH$.next(0.6) // transform scale(0.6)

this.$refs.clipper.onChange$.subscribe(() => {
  // This happens whenever zooming, moving and rotating occur.
})

preview clipping result

import { clipperPreview } from 'vuejs-clipper'

• Props

• Slot

a simple input range component

import { clipperRange } from 'vuejs-clipper'

use v-model binding data with clipper-range

• Props

a new component in 0.2.0

an upload button that transform image files to URL

import { clipperUpload } from 'vuejs-clipper'

use v-model binding data with clipper-upload

• Props

Props that are not defined below will apply to the file input as attributes, for example: accept, id and name.

• Event

• Data