Complemento de recorte de imágenes del subprograma WeChat uniapp, compatible con tamaño personalizado, escalado de punto fijo, arrastre, volteo de imágenes, corte de imágenes redondas/redondeadas, estilos personalizados

qf-image-cropper2.0

Complemento de recorte de imagen

1. Vista previa del efecto:

2. Soporte de plataforma:

1. Admite applets de WeChat (terminal móvil, terminal de PC, herramientas de desarrollo)

2. Plataforma H5 (a partir de la versión 2.1.0)
3. Plataforma de aplicaciones compatibles (a partir de la versión 2.1.5): Android, IOS
4. Compatibilidad desconocida para otras plataformas aún no probadas

3. Funciones de apoyo:

1. Tamaño de recorte personalizado
2. Escala proporcional de punto fijo: el terminal móvil usa el punto central del toque de dos dedos como el punto central del zoom, y el terminal de PC usa el punto donde se encuentra el mouse como el punto central del zoom 3 Arrastrar libremente:
admite el deslizamiento limitado fuera del límite y también admite el efecto Rebote (puede deslizarse fuera del borde al deslizarse y rebotar hacia el borde cuando se suelta) 4. Volteo de imagen: en el
caso de un tamaño de recorte distinto de 1 :1, cuando el ancho y la altura no pueden cubrir el área de recorte al voltear, la imagen se ampliará automáticamente al tamaño apropiado
5. Recorte para generar una nueva imagen
6. Selección local de imágenes
7. Estilo personalizable: puede elegir libremente si representar el borde de recorte, esquinas superiores de recorte escalables, líneas de referencia
8. Recortar esquinas redondeadas de la imagen: círculo, rectángulo redondeado

4. Descripción del atributo

Nombre del Atributo	tipo	valores predeterminados	ilustrar
origen	Cadena		Dirección de recurso de imagen
ancho	Número	300	ancho de cultivo
altura	Número	300	altura de recorte
mostrarborde	booleano	verdadero	Ya sea para dibujar el borde del área de recorte
Mostrar cuadrícula	booleano	verdadero	Ya sea para dibujar guías de cuadrícula del área de recorte
mostrarángulo	booleano	verdadero	Ya sea para mostrar cuatro esquinas que admiten el estiramiento
áreaEscala	Número	0.3	Factor de zoom mínimo del área de recorte
maxScale	Número	5	Factor de zoom máximo de la imagen
rebotar	booleano	verdadero	Si hay un efecto de rebote: al arrastrar, puede arrastrar fuera del límite, y cuando lo suelte, rebotará hacia el límite
giratorio	booleano	verdadero	Ya sea para apoyar voltear
seleccionable	booleano	verdadero	Ya sea para apoyar la selección de material de locales
tamaño del ángulo	Número	20	Tamaño de cuatro esquinas, unidad px
ánguloBordeAncho	Número	2	Ancho de borde de cuatro esquinas, unidad px
radio	Número		Recortar radio de empalme de imagen, unidad px
Tipo de archivo	Cadena	png	El tipo de archivo generado, solo se admite 'jpg' o 'png'. Predeterminado a 'png'
demora	Número	1000	El tiempo requerido desde el dibujo hasta la generación de la imagen, en ms<br>La plataforma del subprograma WeChat es efectiva cuando se usa `Canvas 2D` para dibujar<br>Si dibuja una imagen grande o hay una imagen recortada en blanco, debe aumentar el valore apropiadamente, debido a que `Canvas 2d` adopta un dibujo síncrono, debe controlar el tiempo de finalización del dibujo usted mismo
navegación	booleano	verdadero	Si la página es una barra de título nativa:<br>Cuando showAngle es verdadero en la plataforma H5, cuando la página que usa el complemento está configurada con `"navigationStyle": "custom"` en `page.json`, este valor debe establecerse en falso. De lo contrario, las posiciones de activación de las cuatro esquinas extensibles se desviarán. <br>Nota: Debido a que la altura de la ventana en la plataforma H5 incluye la barra de título, las coordenadas del punto de contacto en la pantalla no la incluyen
@cultivo	EventHandle		Se activa después de completar el recorte, event = { tempFilePath }. Bajo la plataforma H5, tempFilePath es base64

5. Introducir complementos

Código del proyecto: Homilier/qf-image-cropper · GitCode

Use HBuilder X para importar proyectos: complemento de recorte de imágenes - DCloud Plugin Market

6. Uso básico

<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. Instrucciones de uso

1. Se recomienda agregar una configuración a la página que haga referencia al complemento en `pages.json` para prohibir la actualización desplegable y el deslizamiento de la página para evitar problemas como el rendimiento o la inestabilidad de la página.

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

2. Se recomienda no establecer un tamaño de imagen de destino que sea demasiado grande en ancho y alto al usar este complemento, y se recomienda estar dentro de 1365x1365, de lo contrario, puede causar los siguientes problemas:

1. La interfaz está atascada y el uso de la memoria es demasiado alto
2. La imagen generada está distorsionada (borrosa)
3. Después de confirmar el recorte, siempre muestra `Recortando...` ​​Este problema es causado por `uni. canvasToTempFilePath` no se puede devolver, diferentes plataformas y diferentes dispositivos Los límites pueden variar.

3. Si hay un problema de desplazamiento en la imagen recortada, compruebe si se ve afectado por el componente principal o el estilo global de su proyecto.
4. Cuando el atributo src se establece en una imagen de red, el recurso de la imagen debe poder activar la devolución de llamada exitosa de la API `getImageInfo` antes de que pueda usarse para recortar complementos. Por lo tanto, la plataforma del mini programa necesita configurar la lista blanca de nombres de dominio de descarga antes de obtener la información de la imagen de la red para que surta efecto.

8. Otras instrucciones

 1. Esta versión 2.0 está refactorizada en base a mi versión 1.0 anterior.

Versión 1.0: editor de imágenes uniapp, admite tamaño personalizado, escalado, arrastre, recorte

 2. Después de compilar uniapp en el applet, si el diseño está desordenado, intente volver a compilar.

En la actualidad, uniapp aún puede tener algunos problemas con la compilación de `<script lang="wxs" ></script>`. Ocasionalmente, el wxs importado externamente no se compila correctamente en el código generado, lo que hace que la referencia no esté definida.

3. ¿Cómo usar el complemento para los applets nativos de WeChat?

Actualmente, la solución más conveniente solo puede ser crear un proyecto vacío a través de uniapp y luego importar el complemento, compilarlo en un programa pequeño, copiar el directorio común y el directorio uni_modules en el código generado a su propio proyecto y copiar el archivo app.js Copie algunas líneas de código en el archivo correspondiente de su propio proyecto para usar los componentes en el directorio uni_modules como componentes nativos.