更新记录

2.1.6（2023-04-16）

• 修复 组件使用 v-show 指令会导致选择图片后初始位置严重偏位的问题

2.1.5（2023-04-16）

新增 兼容APP平台

2.1.4（2023-03-13）

• 新增 fileType 属性，用于指定生成文件的类型，只支持 'jpg' 或 'png'，默认为 'png'
• 新增 delay 属性，微信小程序平台使用 Canvas 2D 绘制时控制图片从绘制到生成所需时间
• 优化 当生成图片的尺寸宽/高超过 Canvas 2D 最大限制（1365*1365）则将画布尺寸缩放在限制范围内绘制完成后输出目标尺寸
• 优化 旋转图标指示方向与实际旋转方向不符

平台兼容性

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>

使用说明

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

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

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

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

3.如裁剪后的图片存在偏移的问题，请检查是否受自己项目中父组件或全局样式影响。 4.src属性设置网络图片时，图片资源必须是能触发 getImageInfo API 的 success 回调才可用于插件裁剪。因此小程序平台获取网络图片信息需先配置download域名白名单才能生效。