vuejs-clipperk v1.1.9

vuejs-clipper

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.

Demo/Document

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

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

Table of Contents

• Notice
• Installation
• Components
• Changelog

Notice

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

• It's based on vue-rx.
• Use vuejs-clipper plugin also add vue-rx plugin to vue.
• 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.

Installation

NPM & ESM

install vuejs-clipper

$npm install vuejs-clipper --save

need css loader, ex: sass-loader, if you haven't installed :

$npm install -D sass-loader node-sass

(1) use vuejs-clipper plugin

Use vuejs-clipper plugin also add vue-rx plugin to Vue.

By default it will register all components to Vue global scope.

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

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:
    Add property to Vue instance to store `clipper-preview` list.
    You can change the property name
    default: '_imgPreviewLists'
  */
})

(2) separately import components

install vue-rx and it's peer dependency rxjs

$npm install --save vue-rx rx-js

use vue-rx

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

Script

Include vuejs-clipper umd script after Vue.js.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<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>

Components

• clipperBasic
• clipperFixed
• clipperPreview
• clipperUpload
• clipperRange

See detail examples.

clipper-basic

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

clipper-fixed

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

clipper-preview

preview clipping result

import { clipperPreview } from 'vuejs-clipper'

• Props

• Slot

clipper-range

a simple input range component

import { clipperRange } from 'vuejs-clipper'

use v-model binding data with clipper-range

• Props

clipper-upload

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

• Event

• Data

Changelog

• 1.1.6
  • Update dependencies.
• 1.1.5
  • Add new prop area for clipper-fixed.
• 1.1.4
  • Add crossorigin attribute biding for <img/> in clipper (crossOrigin prop).
• 1.1.3
  • Add !important statements to components' style.
• 1.1.2
  • Set pixel of clip result canvas. clip({ wPixel, maxWPixel })
• 1.1.1
  • Add clipper-fixed placeholder slot.
• 1.1.0
  • Fixed clipper-basic props ratio and wrapRatio behaviors, now ratio will not affect clipper's layout since there's wrapRatio to control the layout.
• 1.0.1
  • Fixed clipper-fixed loading images overflow.
  • Add wrapRatio, initWidth and initHeight props to clipper-basic
• 1.0.0
  • Change the clipper-basic design, it will judge layout depends on the ratio.
  • Production version.
• 0.2.13
  • Decrease css specificity
• 0.2.12
  • Fixed issue #13
• 0.2.11
  • Expose rxjs subjects that can set position and layout of the movable area.
• 0.2.10
  • Use passive event listener on wheel event (issue #8).
• 0.2.9
  • New prop border-color for clipper-fixed
  • Fixed issue #4
• 0.2.8
  • New prop accept for clipper-upload (issue #1)
  • Add EXIF image transformation feature to clipper-upload (issue #2)