更新记录

2.2.5（2024-07-30） 下载此版本

• 修复 当 checkRange=true 时，拖动四个伸缩角放大图片时还可能会超出或未到边界的问题
• 修复 当 checkRange=false 时，图片旋转时会放大图片适应裁剪尺寸的问题
• 修复 当 checkRange=true 时，图片旋转 90° 或 270° 进行缩放可能会无法拖动图片的问题

2.2.4（2024-06-21） 下载此版本

• 新增 reverseRotatable 属性，是否支持逆向翻转
• 修复 2.1.7 版本导致旋转后图片没有自动适配裁剪框的问题

2.2.3（2024-06-21） 下载此版本

• 新增 gpu 属性，是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题
• 修复 组件使用 v-if 并设置 src 属性时可能会出现图片渲染位置存在偏差的问题

平台兼容性

qf-image-cropper

图片裁剪插件

uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。

平台支持：

1. 支持微信小程序：移动端、PC端、开发者工具
2. 支持H5平台（2.1.0版本起）
3. 支持APP平台（2.1.5版本起）：Android、IOS
4. 其他平台暂未测试兼容性未知

支持功能：

1. 自定义裁剪尺寸
2. 定点等比例缩放：移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点
3. 自由拖动：支持限制滑出边界，也支持回弹效果（滑动时可滑出边界，释放时回弹到边界）
4. 图片翻转：在裁剪尺寸非 1:1 的情况下，翻转时宽高无法铺满裁剪区域时，图片会自动放大到合适尺寸
5. 裁剪生成新图片
6. 本地选择图片
7. 可定制样式：可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线
8. 裁剪圆角图片：圆形、圆角矩形

属性说明

基本用法

<template>
    <div>
        <qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop"></qf-image-cropper>
    </div>
</template>

<script>
    import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
    export default {
        components: {
            QfImageCropper
        },
        methods: {
            handleCrop(e) {
                uni.previewImage({
                    urls: [e.tempFilePath],
                    current: 0
                });
            }
        }
    }
</script>

通过ref组件实例可在进入页面后直接打开相册选择图片

mounted() {
    this.$refs.qfImageCropper.chooseImage({ sourceType: ['album'] });
}

使用说明

1.建议在pages.json中将引用插件的页面添加一下配置禁止下拉刷新和禁止页面滑动，防止出现性能或页面抖动等问题。

{
    "enablePullDownRefresh": false,
    "disableScroll": true
}

2.建议使用本插件不要设置过大宽高的目标图片尺寸，建议1365x1365以内，否则可能会导致如下问题：

1.界面卡顿，内存占用过高
2.生成图片失真（模糊）
3.确定裁剪后一直显示 `裁剪中...`，该问题是由 `uni.canvasToTempFilePath` 无法回调导致，不同平台不同设备限制可能有所不同。

3.如裁剪后的图片存在偏移的问题，请检查是否受自己项目中父组件或全局样式影响。 4.src属性设置网络图片时，图片资源必须是能触发 getImageInfo API 的 success 回调才可用于插件裁剪。因此小程序平台获取网络图片信息需先配置download域名白名单才能生效。 5.如果组件无法正常渲染且使用了 v-if 时，可尝试将 v-if 替换为 v-show 6.如果App端导入组件后无法正常渲染，请尝试重新运行