ImageCropper 图片裁剪(1.3.2)

TIP

ps: 该组件基于vue-cropper二次整合封装，使用中如果遇到问题及描述不清晰等，可以进一步参考vue-cropper的文档。 vue-cropper: https://github.com/xyxiao001/vue-cropper

用于处理图片裁剪，生成新图片并下载导出。

基础用法

使用src属性来指定图片的地址。使用width属性来指定图片的宽度。autoCropWidth属性用来指定裁剪框的宽度，autoCropHeight属性用来指定裁剪框的高度。

<template>
    <div>
        <YmImageCropper
            :width="300"
            autoCropWidth="200px"
            autoCropHeight="200px"
            src="https://jeek-space-blog.top:3000/images/article/c286943e69f11921ebff214c3fa1e1dd.png"
        ></YmImageCropper>
    </div>
</template>

<script setup lang="ts">
import { YmImageCropper } from 'guyan-ym-ui'
</script>

<style scoped>

</style>

图片预览 & 下载

使用该组件的实例方法exportImage导出图片裁剪数据。

<template>
    <div>
        <ym-image-cropper
            ref="cropperRef"
            src="https://jeek-space-blog.top:3000/images/article/c286943e69f11921ebff214c3fa1e1dd.png"
        ></ym-image-cropper>
        <div style="margin-top: 20px">
            <ym-button @click="preview" type="primary" round >预览</ym-button>
            <ym-button @click="download" type="primary" round >下载</ym-button>
        </div>
        <ym-image-viewer hideOnClickModal ref="imageViewRef"  :urlList="[viewUrl]"></ym-image-viewer>
    </div>
</template>

<script setup lang="ts">
import { YmImageCropper , type CropperExpose, YmImageViewer, type ImageViewerExpose} from 'guyan-ym-ui'
import { ref } from 'vue';

const cropperRef = ref<CropperExpose>()
const imageViewRef = ref<ImageViewerExpose>()

const viewUrl = ref('');

const preview = async() => {
    const url = await cropperRef.value?.exportImage();
    if(!url) return;
    viewUrl.value = url as string
    imageViewRef.value?.open();
}

const download = async() => {
    const url = await cropperRef.value?.exportImage();
    if(!url) return;
    const a = document.createElement('a');
    a.href = url as string;
    a.download = 'image';
    a.click();
}
</script>
 
<style scoped>

</style>

ImageCropper API

Props

属性名	描述	类型	默认值	可选值
`src`	图片地址	`string`	-	-
`width`	图片宽度	`number`	-	-
`height`	图片高度	`number`	-	-
`outputType`	裁剪生成图片的格式	`string`	-	`jpeg`, `png`, `webp`（根据上下文推测）
`outputSize`	裁剪生成图片的质量	`number`	-	0.1 ~ 1（根据上下文推测，实际值可能根据实现有所不同）
`info`	是否显示裁剪框的大小信息	`boolean`	`true`（根据上下文推测，实际默认值可能不同）	`true`, `false`
`fixed`	是否开启截图框宽高固定比例	`boolean`	`false`（根据上下文推测，实际默认值可能不同）	`true`, `false`
`autoCrop`	是否默认生成截图框	`boolean`	`false`（根据上下文推测，实际默认值可能不同）	`true`, `false`
`centerBox`	截图框是否被限制在图片里面	`boolean`	`false`（根据上下文推测，实际默认值可能不同）	`true`, `false`
`mode`	图片默认渲染方式	`string`	`contain`（根据上下文推测，实际默认值可能不同）	`contain`, `cover`, `100px`, `100% auto`（根据上下文推测）
`limitMinSize`	裁剪框限制最小区域	`number`	`10`（根据上下文推测，实际默认值可能不同）	-
`fillColor`	导出时背景颜色填充	`string`	-	`#ffffff`, `white`（根据上下文推测）

Emits

事件名	描述	参数类型
`realTime`	实时裁剪数据变化时触发	`any`
`imgMoving`	图片移动时触发	`any`
`cropMoving`	裁剪框移动时触发	`any`
`imgLoad`	图片加载完成时触发	`any`

Methods

属性名	描述	类型
`exportImage`	导出裁剪后的图片	`() => void`
`cropper`	VueCropper 实例	`VueCropper`
`imgSrc`	当前图片的源地址	`string`

ImageCropper 图片裁剪(1.3.2) ​

基础用法 ​

图片预览 & 下载 ​

ImageCropper API ​

Props ​

Emits ​

Methods ​