更新记录

1.1.4（2025-12-31）

• fix: 修复鸿蒙next截图不完整问题

1.1.3（2025-06-03）

• feat: 兼容uniappx 鸿蒙next
• feat: uniappx 增加fixedBoxWidth属性，用于固定裁剪框宽度

1.1.2（2025-03-24）

• fix: 修复uniappx 初始化设置图片时，在APP端无法响尺寸的问题

平台兼容性

uni-app(4.45)

uni-app x(4.66)

lime-clipper 图片裁剪组件

一个功能强大的图片裁剪组件，支持拖动、缩放、旋转等操作，可用于头像裁剪、图片编辑等场景。组件提供了丰富的自定义选项，可以满足各种复杂的图片裁剪需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 图片裁剪组件文档 - 站点1
• 图片裁剪组件文档 - 站点2
• 图片裁剪组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-clipper
2. 导入后可能需要重新编译项目
3. 在页面中使用l-clipper组件

代码演示

基本用法

@success 事件点击 👉 确定 后会返回生成的图片信息，包含 url、width、height

<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" @success="url = $event.url; show = false" @cancel="show = false"  />
<button @tap="show = true">裁剪</button>

export default {
    data() {
        return {
            show: false,
            url: '',
        }
    }
}

传入图片

image-url可传入相对路径、临时路径、本地路径、网络图片

• 当为网络地址时
• H5：👉 需要解决跨域问题。
  
• 小程序：👉 需要配置 downloadFile 域名
  

<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" :image-url="imageUrl"  @success="url = $event.url; show = false" @cancel="show = false"  />
<button @tap="show = true">裁剪</button>

export default {
    data() {
        return {
            imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
            show: false,
            url: '',
        }
    }
}

确定按钮颜色

<l-clipper class="clipper" confirm-bg-color="linear-gradient(to right, #ff6034, #ee0a24)"  />

使用插槽

共五个插槽 cancel 取消按钮、 photo 选择图片按钮、 rotate 旋转按钮、 confirm 确定按钮和默认插槽。

<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper 
    v-if="show" 
    :isLockWidth="isLockWidth"
    :isLockHeight="isLockHeight"
    :isLockRatio="isLockRatio"
    :isLimitMove="isLimitMove"
    :isDisableScale="isDisableScale"
    :isDisableRotate="isDisableRotate"
    :isShowCancelBtn="isShowCancelBtn"
    :isShowPhotoBtn="isShowPhotoBtn"
    :isShowRotateBtn="isShowRotateBtn"
    :isShowConfirmBtn="isShowConfirmBtn"
    @success="url = $event.url; show = false" 
    @cancel="show = false" >
    <!-- 四个基本按钮插槽 -->
    <view slot="cancel">取消</view>
    <view slot="photo">选择图片</view>
    <view slot="rotate">旋转</view>
    <view slot="confirm">确定</view>
    <!-- 默认插槽 -->
    <view class="tools" style="flex-direction: row; flex-wrap: wrap;">
    <view>
        <text style="color: white;">显示取消按钮{{isShowCancelBtn}}</text>
        <switch :checked="isShowCancelBtn" @change="($event: UniSwitchChangeEvent) => {isShowCancelBtn = $event.detail.value}"/>
    </view>
    <view>
        <text style="color: white;">显示选择图片按钮</text>
        <switch :checked="isShowPhotoBtn" @change="($event: UniSwitchChangeEvent) => {isShowPhotoBtn = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">显示旋转按钮</text>
        <switch :checked="isShowRotateBtn" @change="($event: UniSwitchChangeEvent) => {isShowRotateBtn = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">显示确定按钮</text>
        <switch :checked="isShowConfirmBtn" @change="($event: UniSwitchChangeEvent) => {isShowConfirmBtn = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">锁定裁剪框宽度</text>
        <switch :checked="isLockWidth" @change="($event: UniSwitchChangeEvent) => {isLockWidth = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">锁定裁剪框高度</text>
        <switch :checked="isLockHeight" @change="($event: UniSwitchChangeEvent) => {isLockHeight = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">锁定裁剪框比例</text>
        <switch :checked="isLockRatio" @change="($event: UniSwitchChangeEvent) => {isLockRatio = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">限制移动范围</text>
        <switch :checked="isLimitMove" @change="($event: UniSwitchChangeEvent) => {isLimitMove = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">禁止缩放</text>
        <switch :checked="isDisableScale" @change="($event: UniSwitchChangeEvent) => {isDisableScale = $event.detail.value}" />
    </view>
    <view>
        <text style="color: white;">禁止旋转</text>
        <switch :checked="isDisableRotate" @change="($event: UniSwitchChangeEvent) => {isDisableRotate = $event.detail.value}" />
    </view>
</view>
</l-clipper>
<button @tap="show = true">裁剪</button>

export default {

    data() {
        return {
            show: false,
            url: '',
            isLockWidth: false,
            isLockHeight: false,
            isLockRatio: true,
            isLimitMove: false,
            isDisableScale: false,
            isDisableRotate: false,
            isShowCancelBtn: true,
            isShowPhotoBtn: true,
            isShowRotateBtn: true,
            isShowConfirmBtn: true
        }
    }
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-clipper/components/lime-clipper -->
<lime-clipper />

插件标签说明

• 默认 l-clipper 为组件标签
• 默认 lime-clipper 为演示标签

API文档

Props

事件 Events

主题定制

组件提供了以下CSS变量，可用于自定义样式，uniappx app无效，因为uniappx app是基于canvas：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助