Vue quick cropper

基于vue的移动端头像裁剪插件

Version: 1.0.0 Updated: 11/24/2018

By: duyanpeng License: MIT

Downloads Last 30 Days: 55

vue-quick-cropper

Build Status Read the Docs

A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信,可单指移动双指缩放)

zh-CN中文文档

xiaoguozhanshi

Install


npm install vue-quick-cropper -S

// Introduced in main.js when using vue-cli webpack
import Vue from 'vue';
import VueQuickCropper from 'vue-quick-cropper';

Vue.use(VueQuickCropper)

Use


<template>
        <div id="app">
          <div v-if="!visible">
            <!-- Select photos, can be combined with other image upload plugins, in order to get image files -->
            <input ref="file" @change="choiceImg" type="file">
          </div>
         <!-- 照片裁剪部分 -->
          <div class="main" v-if="visible">
            <div class="header">
              <div class="button" @click="confirm">使用</div>
              <div class="button cancel" @click="cancel">取消</div>
            </div>
            <div class="content">
              <quick-cropper ref="cropper" :img-src="imgSrc" @finish="finish">
              </quick-cropper>
            </div>
        </div>
    </div>
</template>
export default {
  el: '#app',
  data: {
    imgSrc: "",    // 图片数据
    visible:false,  // 剪切框展示
  },
  methods: {
    // Get the base64 and binary of the image
    finish(base64,data){
      console.log(base64,'图片base64')
      console.log(data,'图片二进制')
    },  
    // Confirm button
    confirm() {
      this.$nextTick(() => {
          // Confirm screenshot
        this.$refs.cropper.confirm()
      })
    },
    // cancel
    cancel(){
      this.visible = false
    },
    // Select img callback
    choiceImg(e) {    
      this.visible = true
      const file = e.target.files[0]
      // Read picture information
      const reader = new FileReader();
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.imgSrc = reader.result
        // imgSrc has been acquired, start to initialize the rendered image
        this.$refs.cropper.init()
      }
    },
  }
};
* {
    margin: 0;
    padding: 0;
}

html,
body,
#app {
    height: 100%;
    overflow: hidden;
}

.item {
    height: 200px;
    background: lightgray;
    border: 2px solid green;
    overflow: hidden;
}

.main {
    height:100%;
    box-sizing: border-box;
    padding-top: 44px;
}

.content {
    height: 100%;
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    height: 44px;
    width: 100%;
    background: #303030;
}

.button {
    float: right;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    margin-right: 15px;
    color: green;
}
.cancel{
    float:left;
    margin-left:15px;
}

Options


params type description node
v-bind:imgSrc String Picture src Read by fileReader, See example
v-bind:imgType String Generate image data format "png","jpeg",default "png"
v-on:finish Function Cut completion callback, return base64 data and binary data finish(base64,data),See example
ref.init Function Called when imgSrc gets successful Tell the cropper to render the image,See example
ref.confirm Function Screenshot Tell the cropper screenshot
ref.getBase64Url Function Return to the base64 of the screenshot Use by ref
ref.getData Function Return the binary data of the screenshot Use by ref

Contact me


QQ:215028726

Categories: Vue js
Tags: vuecropper