Descarga de image cropper - Descarga de código fuente image cropper

image cropper

Código Fuente de IA

1.0.0

Descargar

recortador de imágenes

Un complemento de recorte de imágenes de miniprograma de alto rendimiento que admite la rotación.

`1.功能强大。`

`2.性能超高超流畅，大图毫无卡顿感。`

`3.组件化，使用简单。`

`4.点击中间窗口实时查看裁剪结果。`

Experimente la demostración

Preparación inicial

1. Agregue image-cropper al archivo json

    "usingComponents" : {
       "image-cropper" : " ../image-cropper/image-cropper "
    },
    "navigationBarTitleText" : "裁剪图片" ,
    "disableScroll" : true

2.archivo wxml

 < image-cropper id =" image-cropper " limit_move =" {{true}} " disable_rotate =" {{true}} " width =" {{width}} " height =" {{height}} " imgSrc =" {{src}} " bindload =" cropperload " bindimageload =" loadimage " bindtapcut =" clickcut " > </ image-cropper >

3. Ejemplo sencillo

    Page ( {
        data : {
            src : '' ,
            width : 250 , //宽度
            height : 250 , //高度
        } ,
        onLoad : function ( options ) {
	    //获取到image-cropper实例
            this . cropper = this . selectComponent ( "#image-cropper" ) ;
            //开始裁剪
            this . setData ( {
                src : "https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg" ,
            } ) ;
            wx . showLoading ( {
                title : '加载中'
            } )
        } ,
        cropperload ( e ) {
            console . log ( "cropper初始化完成" ) ;
        } ,
        loadimage ( e ) {
            console . log ( "图片加载完成" , e . detail ) ;
            wx . hideLoading ( ) ;
            //重置图片角度、缩放、位置
            this . cropper . imgReset ( ) ;
        } ,
        clickcut ( e ) {
            console . log ( e . detail ) ;
            //点击裁剪框阅览图片
            wx . previewImage ( {
                current : e . detail . url , // 当前显示图片的http链接
                urls : [ e . detail . url ] // 需要预览的图片http链接列表
            } )
        } ,
    } )

Descripción del parámetro (los atributos resaltados indican cambios con respecto a la versión anterior, tenga en cuenta)

propiedad	tipo	Valor predeterminado	valor	describir	Requerido
imgSrc	Cadena	ninguno	Ilimitado	Dirección de la imagen (si es una imagen online se debe configurar un nombre de dominio seguro)	No
desactivar_rotar	Booleano	FALSO	verdadero/falso	Deshabilite la rotación de usuarios (si es falso, se recomienda configurar limit_move en falso al mismo tiempo)	No
límite_movimiento	Booleano	FALSO	verdadero/falso	Limite el rango de movimiento de la imagen (el cuadro de recorte siempre está dentro de la imagen) (cuando es verdadero, se recomienda configurar enable_rotate en verdadero al mismo tiempo)	No
ancho	Número	200	Si se excede el ancho de la pantalla, se convertirá automáticamente al ancho de la pantalla.	Ancho del marco de recorte	No
altura	Número	200	Si excede la altura de la pantalla, cambiará automáticamente a la altura de la pantalla.	Altura del cuadro de recorte	No
ancho_máximo	Número	300	Ancho máximo del cuadro de recorte	Ancho máximo del cuadro de recorte	No
altura_max	Número	300	Altura máxima del marco de recorte	Altura máxima del marco de recorte	No
ancho_mínimo	Número	100	ancho mínimo del cuadro de cultivo	ancho mínimo del cuadro de cultivo	No
altura_min	Número	100	Altura mínima del cuadro de recorte	Altura mínima del cuadro de recorte	No
desactivar_ancho	Booleano	FALSO	verdadero/falso	Bloquear el ancho del cuadro de recorte	No
desactivar_altura	Booleano	FALSO	verdadero/falso	Bloquear altura del cuadro de recorte	No
ratio_deshabilitar	Booleano	FALSO	verdadero/falso	Bloquear relación de marco de recorte	No
escala_exportación	Número	3	Ilimitado	La proporción de la imagen de salida (en relación con el tamaño del cuadro de recorte)	No
calidad	Número	1	0-1	Calidad de imagen generada	No
~~corte_top~~	Número	centro	siempre en pantalla	Margen superior del cuadro de recorte	No
~~corte_izquierda~~	Número	centro	siempre en pantalla	Margen izquierdo del cuadro de recorte	No
`img_width`	Número	No se establece ni el ancho ni el alto, y el lado más pequeño llena el cuadro de recorte.	% de soporte (sin agregar unidad a px) (solo se establece el ancho, el alto es adaptable)	Ancho de imagen	No
`img_height`	Número	No se establece ni el ancho ni el alto, y el lado más pequeño llena el cuadro de recorte.	% de soporte (sin agregar unidad a px) (solo establece la altura, el ancho es adaptable)	Altura de la imagen	No
escala	Número	1	Ilimitado	Relación de zoom de imagen	No
ángulo	Número	0	(ángulo=n*90 cuando limit_move=true)	Ángulo de rotación de la imagen	No
escala_min	Número	0,5	Ilimitado	La relación de zoom mínima de la imagen.	No
escala_max	Número	2	Ilimitado	La relación de zoom máxima de la imagen.	No
vincular	Función	nulo	nombre de la función	inicialización del recortador completada	No
enlazarimageload	Función	nulo	nombre de la función	La imagen se carga y el valor de retorno es Objeto {ancho, alto, ruta, tipo, etc.}	No
enlazartapcut	Función	nulo	nombre de la función	Haga clic en el cuadro de recorte del medio, devuelva el valor Objeto{src,ancho,alto}	No

Descripción de la función

nombre de la función	parámetro	valor de retorno	describir	Parámetro requerido
subir	ninguno	ninguno	Abra la interfaz de carga de imágenes de wx y comience a recortar	No
empujarImg	src	ninguno	Inserta la imagen y comienza a recortar.	Sí
obtenerImg	Función (función de devolución de llamada)	`Object{url,width,height}`	Recorte y obtenga la imagen (tamaño de la imagen = ancho y alto de la imagen * escala_exportación)	Sí
~~establecerCutXY~~	X,Y	ninguno	Establecer la posición del marco de recorte	Sí
establecerTamañoDeCorte	ancho, alto	ninguno	Establecer el tamaño del cuadro de recorte	Sí
establecerCentroCut	ninguno	ninguno	Establecer el marco de recorte en el centro	No
establecer escala	escala	ninguno	Establezca la relación de escala de la imagen (no afectada por min_scale, max_scale)	Sí
establecerángulo	grados	ninguno	Establecer el ángulo de rotación de la imagen (con efecto de transición)	Sí
establecerTransformar	{x,y,ángulo,escala,corteX,corteY}	ninguno	Cambios en la imagen según el original (la escala se ve afectada por min_scale, max_scale)	Pase los parámetros según sea necesario
imgRestablecer	ninguno	ninguno	Restablezca el ángulo, el zoom y la posición de la imagen (se puede usar en la devolución de llamada onloadImage)	No