恶作剧

由收割机组成的 Vue 图像收割器组件 .

吉图布: https://github.com/ballcat-projects/vue-cropper (中文(简体) )

演示

在线演示 : https://ballcat-projects.github.io/vue-cropper (中文(简体) )

您也可以克隆寄存器并本地运行演示 :

# clone
git clone https://github.com/ballcat-projects/vue-cropper.git

# enter the folder
cd vue-cropper/example

# install dependency
npm install

# run it
npm run dev

开始

安装

npm install @ballcat/vue-cropper

或者说

yarn add @ballcat/vue-cropper

使用量

全球登记

import { createApp } from 'vue';
import App from './App';

import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const app = createApp(App);

app.use(VueCropper).mount('#app');

地方登记

<template>
  <vue-cropper 
      ref="vueCropperRef"
      :src="imgSrc"
      alt="Source Image"
  />
</template>
<script>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  setup() {
    const imgSrc = ref('the image path')
    const vueCropperRef = ref(null);

    onMounted(() => {
      console.log(vueCropperRef.value.getData());
    });

    return {
      imgSrc,
      vueCropperRef
    };
  }
};
</script>

或使用设置脚本

<script setup>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const imgSrc = ref('the image path')
const vueCropperRef = ref(null);

onMounted(() => {
  console.log(vueCropperRef.value.getData());
});
</script>

API 密码

可用 VueCropper 道具分为自定义和所有属性两个部分,由 cropperjs 支持

自定义选项

Cropperjs 选项

见 copperjs 文档

自定义曝光方法