image cropper Télécharger - image cropper Téléchargement du code source

image cropper

Code Source AI

1.0.0

Télécharger

recadrage d'image

Un mini-programme de recadrage d'images hautes performances qui prend en charge la rotation.

`1.功能强大。`

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

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

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

Expérience Démo

Préparation initiale

1. Ajoutez image-cropper au fichier json

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

Fichier 2.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. Exemple simple

    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链接列表
            } )
        } ,
    } )

Description des paramètres (les attributs en surbrillance indiquent les modifications par rapport à la version précédente, veuillez noter)

propriété	taper	Valeur par défaut	valeur	décrire	Requis
imgSrc	Chaîne	aucun	Illimité	Adresse de l'image (s'il s'agit d'une image en ligne, un nom de domaine sécurisé doit être configuré)	Non
désactiver_rotation	Booléen	FAUX	vrai/faux	Désactivez la rotation des utilisateurs (si faux, il est recommandé de définir limit_move sur false en même temps)	Non
limite_move	Booléen	FAUX	vrai/faux	Limiter la plage de déplacement de l'image (la zone de recadrage est toujours à l'intérieur de l'image) (lorsque c'est vrai, il est recommandé de définir Disable_rotate sur true en même temps)	Non
largeur	Nombre	200	Si la largeur de l'écran est dépassée, elle sera automatiquement convertie en largeur de l'écran.	Largeur du cadre de recadrage	Non
hauteur	Nombre	200	S'il dépasse la hauteur de l'écran, il passera automatiquement à la hauteur de l'écran.	Hauteur de la zone de recadrage	Non
largeur_max	Nombre	300	Largeur maximale de la zone de recadrage	Largeur maximale de la zone de recadrage	Non
hauteur_max	Nombre	300	Hauteur maximale du cadre de coupe	Hauteur maximale du cadre de coupe	Non
largeur_min	Nombre	100	largeur minimale de la zone de recadrage	largeur minimale de la zone de recadrage	Non
hauteur_min	Nombre	100	Hauteur minimale de la boîte de recadrage	Hauteur minimale de la boîte de recadrage	Non
désactiver_largeur	Booléen	FAUX	vrai/faux	Verrouiller la largeur de la zone de recadrage	Non
désactiver_hauteur	Booléen	FAUX	vrai/faux	Verrouiller la hauteur de la zone de recadrage	Non
ratio_désactiver	Booléen	FAUX	vrai/faux	Verrouiller le rapport de trame de recadrage	Non
export_scale	Nombre	3	Illimité	La proportion de l'image de sortie (par rapport à la taille de la zone de recadrage)	Non
qualité	Nombre	1	0-1	Qualité de l'image générée	Non
~~coupe_top~~	Nombre	centre	toujours à l'écran	Recadrer la marge supérieure de la boîte	Non
~~coupe_gauche~~	Nombre	centre	toujours à l'écran	Recadrage de la marge gauche de la zone	Non
`img_width`	Nombre	Ni la largeur ni la hauteur ne sont définies et le plus petit côté remplit la zone de recadrage.	Support % (sans ajouter d'unité à px) (uniquement la largeur définie, la hauteur est adaptative)	Largeur de l'image	Non
`img_height`	Nombre	Ni la largeur ni la hauteur ne sont définies et le plus petit côté remplit la zone de recadrage.	Support % (sans ajouter d'unité à px) (uniquement la hauteur définie, la largeur est adaptative)	Hauteur de l'image	Non
échelle	Nombre	1	Illimité	Taux de zoom de l'image	Non
angle	Nombre	0	(angle=n*90 lorsque limit_move=true)	Angle de rotation de l'image	Non
min_scale	Nombre	0,5	Illimité	Le taux de zoom minimum de l'image	Non
max_scale	Nombre	2	Illimité	Le taux de zoom maximum de l'image	Non
charge de liaison	Fonction	nul	nom de la fonction	initialisation du cropper terminée	Non
lierimageload	Fonction	nul	nom de la fonction	L'image est chargée et la valeur de retour est Object{largeur, hauteur, chemin, type, etc.}	Non
liertapcut	Fonction	nul	nom de la fonction	Cliquez sur la zone de recadrage du milieu, renvoie la valeur Object{src,width,height}	Non

Description de la fonction

nom de la fonction	paramètre	valeur de retour	décrire	Paramètre requis
télécharger	aucun	aucun	Appelez l'interface d'image de téléchargement wx et commencez à recadrer	Non
pousserImg	src	aucun	Insérez l'image et commencez le recadrage	Oui
obtenirImg	Fonction (fonction de rappel)	`Object{url,width,height}`	Recadrez et obtenez l'image (taille de l'image = largeur et hauteur de l'image * export_scale)	Oui
~~setCouperXY~~	X, Oui	aucun	Définir la position du cadre de recadrage	Oui
setCutSize	largeur, hauteur	aucun	Définir la taille de la zone de recadrage	Oui
définirCutCenter	aucun	aucun	Placez le cadre de recadrage au centre	Non
définirÉchelle	échelle	aucun	Définir le rapport de mise à l'échelle de l'image (non affecté par min_scale, max_scale)	Oui
définirAngle	degré	aucun	Définir l'angle de rotation de l'image (avec effet de transition)	Oui
setTransform	{x, y, angle, échelle, cutX, cutY}	aucun	Modifications de l'image en fonction de l'original (l'échelle est affectée par min_scale, max_scale)	Transmettez les paramètres si nécessaire
imgRéinitialiser	aucun	aucun	Réinitialiser l'angle, le zoom et la position de l'image (peut être utilisé dans le rappel onloadImage)	Non