uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式

qf-image-cropper2.0

图片裁剪插件

1.效果预览：

2.平台支持：

1.支持微信小程序（移动端、PC端、开发者工具）

2.H5平台（2.1.0版本起）
3. 支持APP平台（2.1.5版本起）：Android、IOS
4.其他平台暂未测试兼容性未知

3.支持功能：

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

4.属性说明

5.引入插件

项目代码：Homilier / qf-image-cropper · GitCode

使用HBuilder X导入项目 ：图片裁剪插件 - DCloud 插件市场

6.基本用法

<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.saveImageToPhotosAlbum({
					filePath: e.tempFilePath
				})
			}
 		}
	}
</script>

7.使用说明

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

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

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

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

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

8.其他说明

 1.该2.0版本基于我之前的1.0版本进行重构。

1.0版本：uniapp图片编辑器，支持自定义尺寸、缩放、拖动、裁剪

 2.uniapp编译到小程序后如果出现布局错乱则尝试重新编译。

目前uniapp对于``的编译可能还存在一定问题，会偶尔出现没有正确将外部引入的wxs编译到生成的代码中导致引用为undefined。

3.原生微信小程序如何使用该插件？

目前最便捷的方案只能是通过uniapp建一个空项目然后导入该插件，编译到小程序后在生成的代码中拷贝common目录和uni_modules目录到自己的项目中，还有将app.js文件中的几行代码拷贝到自己项目对应文件中即可将uni_modules目录中的组件当原生的组件使用。