xcrop v1.1.18

移动端裁剪插件

移动端裁剪插件，原生 JavaScript 实现，无依赖，支持 Vue 2.0，React。

Demo

Demo

安装

Install with npm: npm install xcrop --save

直接使用

<input type="file" id="file-input" accept="image/*">

import Crop from 'xcrop'

const options = {}
const crop = new Crop(options)

crop.on('cancel', crop => {
  crop.hide()
})
crop.on('confirm', crop => {
  const canvas = crop.get({ format: 'canvas' })
  document.body.appendChild(canvas)
  crop.hide()
})

function onChange (e) {
  var file = e.target.files[0]
  if (!file) return false
  crop.load(file)
  this.value = ''
}

document.getElementById('file-input').onchange = onChange

基于 Vue 2.0 使用

<Crop
  :file="file"
  :options="options"
  @on-cancel="onCancel"
  @on-confirm="onConfirm"
  @on-error="onError"
/>
<input type="file" @change="onChange($event)" accept="image/*" :value="''">
<img v-if="output" :src="output" width="100%">

import Crop from 'xcrop/src/components/VueCrop'

export default {
  data () {
    return {
      file: null,
      options: {},
      output: ''
    }
  },
  methods: {
    onChange (e) {
      this.file = e.target.files[0]
    },
    onCancel (crop) {
      this.file = null
      crop.hide()
    },
    onConfirm (crop) {
      this.output = crop.get()
      this.file = null
      crop.hide()
    },
    onError (error) {
      console.log(error)
    }
  },
  components: {
    Crop
  }
}

基于 React 使用

import React, { Component } from 'react'
import Crop from 'xcrop/src/components/ReactCrop'

export default class App extends Component {

  constructor (props) {
    super(props)

    this.state = {
      options: {},
      output: ''
    }

    this.onChange = this.onChange.bind(this)
    this.onCancel = this.onCancel.bind(this)
    this.onConfirm = this.onConfirm.bind(this)
    this.onError = this.onError.bind(this)
  }

  onChange (e) {
    this.crop[0].load(e.target.files[0])
  }

  onCancel (crop) {
    crop.hide()
  }

  onConfirm (crop) {
    this.setState({
      output: crop.get()
    })
    crop.hide()
  }

  onError (error) {
    console.log(error)
  }

  render () {
    return (
      <div className="App">
        <input type="file" onChange={this.onChange} accept="image/*" value="" />

        {this.state.output && <img src={this.state.output} width="100%" alt="" />}

        <Crop
          ref={component => this.crop = component || null}
          options={this.state.options}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          onError={this.onError}
        />
      </div>
    )
  }
}

Options

Type: Object

实例化选项：new Crop(options)

实例方法

load(target)

加载图片

get(options)

获取裁剪图片

show / hide

显示/隐藏组件

setBorder

设置裁剪框位置大小：setBorder(border)

on

监听自定义事件，函数返回自身，可以链式调用，

可监听的事件有：

emit

分发自定义事件

off

移除自定义事件

this.canvas.moveTo

移动图片到指定位置

this.canvas.sacleTo

缩放图片

destroy

销毁组件

静态方法

Crop.imageToCanvas

图片转canvas

Browser support

Android 4.2+, iOS 8+