更新记录

1.0.0（2025-06-07） 下载此版本

支持基础图像裁切功能，支持四种裁剪模式： free：自由缩放与拖动 fixedRatio：固定宽高比（如 1:1、4:3） fixedWidth：固定宽度，高度可变 fixedHeight：固定高度，宽度可变

支持通过触控操作拖动裁剪区域、缩放四角或边缘 使用 完成图像裁切并导出为临时文件路径（适配微信小程序） 原图缩放自适应展示，支持高分辨率图片裁切 全端兼容（微信小程序、H5、App）

平台兼容性

uni-app(4.65)

z-image-cropper 图片裁剪组件

一个轻量级、可自由拖动缩放的图片裁剪组件，适用于 uni-app，支持自由裁剪 / 固定宽高比裁剪，支持触控缩放、移动、多种模式切换。可广泛用于头像裁剪、图片处理等场景。

✨ 功能特点

• ✅ 支持自由裁剪、固定宽高比裁剪
• ✅ 支持拖动移动与缩放
• ✅ 支持原图等比例缩放裁剪区域
• ✅ 裁剪后导出为 canvas 并生成临时文件
• ✅ 支持四角和边缘拖动
• ✅ 简洁黑色背景，突出裁剪区域
• ✅ 已适配微信小程序平台
• ✅ 已适配安卓app

📦 安装方式

1. 打开 插件市场
2. 搜索 z-image-cropper
3. 点击「导入到项目」

📌 参数说明（Props）

🧩 使用示例

<template>
    <view class=".cropper-root">
        <uni-file-picker v-if="!imageUrl" class="image-picker" ref="imagePickerRef" @select="selectImage"
            :del-icon="false" file-mediatype="image" file-extname="png,jpg" :limit="1" return-type="value"
            :sizeType="['original']" :sourceType="['album']" />
        <ImageCropper v-if="imageUrl && !cropperUrl" :src="imageUrl" :confirm="confirmCropper" :cancel="cancelCropper" mode='fixedRatio' :fixedRatio="0.5"></ImageCropper>
        <image v-if="cropperUrl" :src="cropperUrl" mode="aspectFit"></image>
    </view>

</template>

<script setup>
    import { ref } from 'vue'
    import ImageCropper from '@/components/z-image-cropper/z-image-cropper.vue'

    const imageUrl = ref()
    const cropperUrl = ref()

    function selectImage(val) {
        const tempFile = val.tempFiles[0]
        const validExts = ['png', 'jpg']
        if (!tempFile.extname || !validExts.includes(tempFile.extname.toLowerCase())) {
            uni.showToast({
                title: '仅支持 .png / .jpg 文件',
                icon: 'none'
            })
            imagePickerRef.value.clearFiles()
            return
        }
        imageUrl.value = tempFile.url
    }

    function confirmCropper(url) {
        cropperUrl.value = url
    }

    function cancelCropper() {
        imageUrl.value = null
        cropperUrl.value = null
    }
</script>

<style scoped>
    /* 页面整体布局 */
    page,
    html,
    body,
    .cropper-root {
        height: 100%;
        overflow: hidden !important;
        touch-action: none;
    }
</style>