LuckRain7/vue-image-cropper-simple

A simple and effective vue component for image crop. （基于 vue 的图片剪裁组件）

vue-image-cropper-simple

A simple and effective vue component for image crop. （基于 vue 的图片剪裁组件）

安装

$ npm install vue-image-cropper-simple

$ yarn add vue-image-cropper-simple

基本用法

<image-cropper
  :isVisible.sync="isVisible"
  model=“base64”
  @transmitImageData="transmitImageData"
>
</image-cropper>

DEMO 地址

DEMO

Props

名称	类型	值	说明
isVisible	Boolean	false(默认)/true	是否显示组件
model	String	base64(默认)/Blob	输入图片格式是 base64 或者 Blob 格式

Events

事件名	说明	参数
transmitImageData	图片生成后的回调函数，接受图片数据	imageData

Example

<template>
  <div id="app">
    <div class="my-title">
      vue-image-cropper-simple
    </div>
    <div class="gogo">
      <img alt="Vue logo" :src="imageSrc" @click="go" />
      <p>点击图片上传</p>
    </div>
    <image-cropper
      :isVisible.sync="isVisible"
      model="base64"
      @transmitImageData="transmitImageData"
    ></image-cropper>
  </div>
</template>

<script>
import ImageCropper from "vue-image-cropper-simple";
export default {
  name: "App",
  data() {
    return {
      isVisible: false,
      imageSrc: "/logo.png"
    };
  },
  methods: {
    go() {
      this.isVisible = !this.isVisible;
    },
    transmitImageData(imageDataBase64) {
      this.imageSrc = imageDataBase64;
    }
  },
  components: { ImageCropper }
};
</script>