vue-image-clipper

介绍

A Vue.js mobile Component based on alloycrop, With this component, you can crop images(一个基于alloycrop的vue移动端组件,使用该组件你可以在移动端做图片的裁剪)

安装

npm i vue-image-clipper -S

or

yarn add vue-image-clipper 

使用

• 在main.js中

import Vue from 'vue'

import VueImageClipper from 'vue-image-clipper'

Vue.use(VueImageClipper)

• 在组件中

<template>
  <div id="app">
    <vue-image-clipper 
      v-if="isShow" 
      :options="options"
      @confirm="handleConfirm" 
      @cancel="handleCancel"
    /> 
  <img :src="imgSrc" alt="" width="300" height="300">
  <hr/>
  <div id="test"></div>
  <button @click="isShow=true">测试代码</button>
  </div>
</template>

<script>
import VueImageClipper from './VueImageClipper/VueImageClipper'
export default {
  name: 'app',
  components:{
    VueImageClipper
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      imgSrc:'',
      isShow:true,
      options:{
        image_src: "https://img0.baidu.com/it/u=3710399885,2923078079&fm=26&fmt=auto&gp=0.jpg", //必传
        className: 'VueImageClipper',
        circle: true, // 可选参数默认为true,展示原型的选择框,false为矩形选择框
        width: 400,  //选择框的框 默认200
        height: 400,  //选择框的高 默认200
        output: 1, // 输出的图片比例 800*800 默认200*200
        ok_text: "yes111", // 确认按钮的文字 默认是ok
        cancel_text: "no2222" //取消按钮的文字 默认是cancel
      }
    }
  },
  methods:{
    handleConfirm(imgSrc,canvas){
      this.imgSrc=imgSrc
      document.querySelector('#test').appendChild(canvas)
      this.isShow=false
    }
  }
}
</script>

props	说明	type	默认值	返回参数
image_src	需要裁剪的图片	string	null(必传)
className	渲染的canvas挂载点	string	'VueImageClipper'
circle	裁剪框的形状	boolean	true(原型,false为矩形)
width	裁剪框的宽	string	默认200px
height	裁剪框的高	string	默认200px
output	裁剪出的图片分辨率	number	1	输出的图片比例 800*800 默认200*200
ok_text	确认裁剪按钮的文字	string	ok
cancel_text	取消裁剪按钮的文字	string	cancel
confirm	确认裁剪按钮的事件	function	null	(base64图片地址,canvasDom)
cancel	取消裁剪按钮的事件	function	null	null

• 效果 移动端打开