image cropper Download - image cropper Source code download

image cropper

AI Source Code

1.0.0

Download

image-cropper

A high-performance mini program image cropping plug-in that supports rotation.

`1.功能强大。`

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

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

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

Experience Demo

Initial preparation

1. Add image-cropper to the json file

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

2.wxml file

 < 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. Simple example

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

Parameter description (highlighted attributes indicate changes from the previous version, please note)

property	type	Default value	value	describe	Required
imgSrc	String	none	Unlimited	Image address (if it is an online image, a secure domain name must be configured)	no
disable_rotate	Boolean	false	true/false	Disable user rotation (if false, it is recommended to set limit_move to false at the same time)	no
limit_move	Boolean	false	true/false	Limit the moving range of the picture (the cropping box is always within the picture) (when true, it is recommended to set disable_rotate to true at the same time)	no
width	Number	200	If the screen width is exceeded, it will be automatically converted to the screen width.	Cropping frame width	no
height	Number	200	If it exceeds the screen height, it will automatically change to the screen height.	Cropping box height	no
max_width	Number	300	Maximum width of cropping box	Maximum width of cropping box	no
max_height	Number	300	Maximum height of cropping box	Maximum height of cropping frame	no
min_width	Number	100	crop box minimum width	crop box minimum width	no
min_height	Number	100	Minimum height of cropping box	Minimum height of cropping box	no
disable_width	Boolean	false	true/false	Lock crop box width	no
disable_height	Boolean	false	true/false	Lock crop box height	no
disable_ratio	Boolean	false	true/false	Lock crop frame ratio	no
export_scale	Number	3	Unlimited	The proportion of the output image (relative to the cropping box size)	no
quality	Number	1	0-1	Generated image quality	no
~~cut_top~~	Number	center	always on screen	Crop box top margin	no
~~cut_left~~	Number	center	always on screen	Cropping box left margin	no
`img_width`	Number	Neither width nor height is set, and the smallest side fills the cropping box.	Support % (without adding unit to px) (only set width, height is adaptive)	Image width	no
`img_height`	Number	Neither width nor height is set, and the smallest side fills the cropping box.	Support % (without adding unit to px) (only set height, width is adaptive)	Image height	no
scale	Number	1	Unlimited	Image zoom ratio	no
angle	Number	0	(angle=n*90 when limit_move=true)	Image rotation angle	no
min_scale	Number	0.5	Unlimited	The minimum zoom ratio of the image	no
max_scale	Number	2	Unlimited	The maximum zoom ratio of the image	no
bindload	Function	null	function name	cropper initialization completed	no
bindimageload	Function	null	function name	The image is loaded, and the return value is Object{width, height, path, type, etc.}	no
bindtapcut	Function	null	function name	Click on the middle cropping box, return value Object{src,width,height}	no

Function description

function name	parameter	return value	describe	Parameter required
upload	none	none	Call up the wx upload image interface and start cropping	no
pushImg	src	none	Insert the image and start cropping	yes
getImg	Function(callback function)	`Object{url,width,height}`	Crop and get the picture (picture size = picture width and height * export_scale)	yes
~~setCutXY~~	X, Y	none	Set cropping frame position	yes
setCutSize	width, height	none	Set crop box size	yes
setCutCenter	none	none	Set the cropping frame to center	no
setScale	scale	none	Set the image scaling ratio (not affected by min_scale, max_scale)	yes
setAngle	deg	none	Set image rotation angle (with transition effect)	yes
setTransform	{x,y,angle,scale,cutX,cutY}	none	Changes in the image based on the original (scale is affected by min_scale, max_scale)	Pass parameters as needed
imgReset	none	none	Reset the angle, zoom, and position of the image (can be used in the onloadImage callback)	no