uniapp WeChat applet picture cropping plug-in, supports custom size, fixed-point scaling, dragging, picture flipping, cutting round/rounded pictures, custom styles

qf-image-cropper2.0

Image cropping plugin

1. Effect preview:

2. Platform support:

1. Support WeChat applets (mobile terminal, PC terminal, developer tools)

2. H5 platform (starting from version 2.1.0)
3. Support APP platform (starting from version 2.1.5): Android, IOS
4. Compatibility unknown for other platforms not yet tested

3. Support functions:

1. Custom cropping size
2. Fixed-point proportional scaling: the mobile terminal uses the center point of the two-finger touch as the zoom center point, and the PC terminal uses the point where the mouse is located as the zoom center point 3. Free dragging:
supports limit sliding out of the boundary, and also supports Rebound effect (it can slide out of the border when sliding, and rebound to the border when released)
4. Image flip: In the case of cropping size other than 1:1, when the width and height cannot cover the cropping area when flipping, the image will be automatically enlarged to Appropriate size
5. Cropping to generate a new picture
6. Local selection of pictures
7. Customizable style: you can freely choose whether to render the cropping border, scalable cropping top corners, reference lines
8. Cropping rounded corners of the picture: circle, rounded rectangle

4. Attribute description

attribute name	type	Defaults	illustrate
src	String		Image resource address
width	Number	300	crop width
height	Number	300	clipping height
showBorder	Boolean	true	Whether to draw the clipping area border
showGrid	Boolean	true	Whether to draw clipping area grid guides
showAngle	Boolean	true	Whether to display four corners that support stretching
areaScale	Number	0.3	Cropping area minimum zoom factor
maxScale	Number	5	Picture maximum zoom factor
bounce	Boolean	true	Whether there is a rebound effect: when dragging, you can drag out of the boundary, and when you release it, it will bounce back to the boundary
rotatable	Boolean	true	Whether to support flipping
choosable	Boolean	true	Whether to support material selection from local
angleSize	Number	20	Size of four corners, unit px
angleBorderWidth	Number	2	Four corner border width, unit px
radius	Number		Crop image fillet radius, unit px
fileType	String	png	生成文件的类型，只支持 'jpg' 或 'png'。默认为 'png'
delay	Number	1000	图片从绘制到生成所需时间，单位ms<br>微信小程序平台使用 `Canvas 2D` 绘制时有效<br>如绘制大图或出现裁剪图片空白等情况应适当调大该值，因 `Canvas 2d` 采用同步绘制，需自己把控绘制完成时间
navigation	Boolean	true	页面是否是原生标题栏：<br>H5平台当 showAngle 为 true 时，使用插件的页面在 `page.json` 中配置了 `"navigationStyle": "custom"` 时，必须将此值设为 false ，否则四个可拉伸角的触发位置会有偏差。<br>注：因H5平台的窗口高度是包含标题栏的，而屏幕触摸点的坐标是不包含的
@crop	EventHandle		剪裁完成后触发，event = { tempFilePath }。在H5平台下，tempFilePath 为 base64

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. The interface is stuck, and the memory usage is too high.
2. The generated image is distorted (blurred)
3. After confirming the cropping, it always displays `Cropping...`. This problem is caused by `uni.canvasToTempFilePath` cannot be called back, different platforms and different devices Limits may vary.

3. If there is an offset problem in the cropped image, please check whether it is affected by the parent component or global style in your project.
4. When the src attribute is set to a network image, the image resource must be able to trigger the success callback of the `getImageInfo` API before it can be used for plug-in cropping. Therefore, the mini program platform needs to configure the download domain name whitelist before obtaining network image information to take effect.

8. Other instructions

 1. This 2.0 version is refactored based on my previous 1.0 version.

Version 1.0: uniapp image editor, supports custom size, scaling, dragging, cropping

 2. After uniapp is compiled into the applet, if the layout is disordered, try to recompile.

At present, uniapp may still have some problems with the compilation of `<script lang="wxs" ></script>`. Occasionally, the externally imported wxs is not correctly compiled into the generated code, resulting in the reference being undefined.

3. How to use the plug-in for native WeChat applets?

At present, the most convenient solution can only be to create an empty project through uniapp and then import the plug-in, compile it into a small program, copy the common directory and uni_modules directory in the generated code to your own project, and copy the app.js file Copy a few lines of code to the corresponding file of your own project to use the components in the uni_modules directory as native components.