image cropper下載 - image cropper原始碼下載

image cropper

Ai源碼

1.0.0

下載

image-cropper

一款高性能的小程式圖片裁剪插件，支援旋轉。

`1.功能强大。`

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

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

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

體驗Demo

初始準備

1.json檔案中新增image-cropper

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

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.簡單範例

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

參數說明（高亮屬性表示對於上個版本有修改，請注意）

屬性	類型	缺省值	取值	描述	必填
imgSrc	String	無	無限制	圖片地址(如果是網路圖片需設定安全網域)	否
disable_rotate	Boolean	false	true/false	禁止使用者旋轉(為false時建議同時設定limit_move為false)	否
limit_move	Boolean	false	true/false	限制圖片移動範圍(裁切框始終在圖片內)(為true時建議同時設定disable_rotate為true)	否
width	Number	200	超過螢幕寬度自動轉換為螢幕寬度	裁切框寬度	否
height	Number	200	超過螢幕高度自動轉為螢幕高度	裁切框高度	否
max_width	Number	300	裁切框最大寬度	裁切框最大寬度	否
max_height	Number	300	裁切框最大高度	裁切框最大高度	否
min_width	Number	100	裁切框最小寬度	裁切框最小寬度	否
min_height	Number	100	裁切框最小高度	裁切框最小高度	否
disable_width	Boolean	false	true/false	鎖定裁切框寬度	否
disable_height	Boolean	false	true/false	鎖定裁切框高度	否
disable_ratio	Boolean	false	true/false	鎖定裁切框比例	否
export_scale	Number	3	無限制	輸出圖片的比例(相對於裁切框尺寸)	否
quality	Number	1	0-1	生成的圖片質量	否
~~cut_top~~	Number	居中	始終在螢幕內	裁切框上邊距	否
~~cut_left~~	Number	居中	始終在螢幕內	裁切框左邊距	否
`img_width`	Number	寬高都不設置，最小邊填滿裁切框	支援%(不加單位為px)(只設定寬度，高度自適應)	圖片寬度	否
`img_height`	Number	寬高都不設置，最小邊填滿裁切框	支援%(不加單位為px)(只設定高度，寬度自適應)	圖片高度	否
scale	Number	1	無限制	圖片的縮放比	否
angle	Number	0	(limit_move=true時angle=n*90)	圖片的旋轉角度	否
min_scale	Number	0.5	無限制	圖片的最小縮放比	否
max_scale	Number	2	無限制	圖片的最大縮放比	否
bindload	Function	null	函數名稱	cropper初始化完成	否
bindimageload	Function	null	函數名稱	圖片載入完成,傳回值Object{width,height,path,type等}	否
bindtapcut	Function	null	函數名稱	點選中間裁切框,傳回值Object{src,width,height}	否

函數說明

函數名	參數	傳回值	描述	參數必填
upload	無	無	調起wx上傳圖片介面並開始剪裁	否
pushImg	src	無	放入圖片開始裁剪	是
getImg	Function(回呼函數)	`Object{url,width,height}`	裁切並取得圖片(圖片尺寸= 圖片寬高* export_scale)	是
~~setCutXY~~	X、Y	無	設定裁切框位置	是
setCutSize	width、height	無	設定裁剪框大小	是
setCutCenter	無	無	設定裁切框居中	否
setScale	scale	無	設定圖片縮放比例（不受min_scale、max_scale影響）	是
setAngle	deg	無	設定圖片旋轉角度（附過渡效果）	是
setTransform	{x,y,angle,scale,cutX,cutY}	無	圖片在原有基礎上的變化(scale受min_scale、max_scale影響)	根據需要傳參
imgReset	無	無	重置圖片的角度、縮放、位置(可以在onloadImage回檔裡使用)	否