image cropper
1.0.0
1.功能强大。2.性能超高超流畅，大图毫无卡顿感。3.组件化，使用简单。4.点击中间窗口实时查看裁剪结果。 "usingComponents" : {
"image-cropper" : " ../image-cropper/image-cropper "
},
"navigationBarTitleText" : "裁剪图片" ,
"disableScroll" : true < 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 > 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 | 弦 | なし | 無制限 | イメージ アドレス (オンライン イメージの場合は、安全なドメイン名を構成する必要があります) | いいえ |
| 回転を無効にする | ブール値 | 間違い | 真/偽 | ユーザーローテーションを無効にします（falseの場合、同時にlimit_moveをfalseに設定することをお勧めします） | いいえ |
| 限界移動 | ブール値 | 間違い | 真/偽 | 画像の移動範囲を制限します (トリミング ボックスは常に画像内にあります) (true の場合、同時に disable_rotate を true に設定することをお勧めします) | いいえ |
| 幅 | 番号 | 200 | 画面幅を超える場合は、自動的に画面幅に変換されます。 | クロップ枠幅 | いいえ |
| 身長 | 番号 | 200 | 画面の高さを超える場合は、自動的に画面の高さに変更されます。 | トリミングボックスの高さ | いいえ |
| 最大幅 | 番号 | 300 | クロップボックスの最大幅 | クロップボックスの最大幅 | いいえ |
| 最大高さ | 番号 | 300 | クロップ枠の最大高さ | クロップ枠の最大高さ | いいえ |
| min_width | 番号 | 100 | クロップボックスの最小幅 | クロップボックスの最小幅 | いいえ |
| min_height | 番号 | 100 | クロップボックスの最小高さ | クロップボックスの最小高さ | いいえ |
| 無効にする_幅 | ブール値 | 間違い | 真/偽 | クロップボックスの幅をロックする | いいえ |
| 無効化の高さ | ブール値 | 間違い | 真/偽 | クロップボックスの高さをロックする | いいえ |
| 無効化率 | ブール値 | 間違い | 真/偽 | クロップフレーム比率をロックする | いいえ |
| エクスポートスケール | 番号 | 3 | 無制限 | 出力画像の比率 (トリミング ボックスのサイズに対する) | いいえ |
| 品質 | 番号 | 1 | 0-1 | 生成される画質 | いいえ |
| 番号 | 中心 | 常に画面上にある | クロップボックスの上余白 | いいえ | |
| 番号 | 中心 | 常に画面上にある | トリミングボックスの左マージン | いいえ | |
img_width | 番号 | 幅も高さも設定されておらず、最小の辺がトリミング ボックスを埋めます。 | % をサポート (px に単位を追加しない) (幅のみを設定し、高さは適応します) | 画像の幅 | いいえ |
img_height | 番号 | 幅も高さも設定されておらず、最小の辺がトリミング ボックスを埋めます。 | % をサポート (px に単位を追加しない) (高さのみを設定し、幅は適応します) | 画像の高さ | いいえ |
| 規模 | 番号 | 1 | 無制限 | 画像のズーム率 | いいえ |
| 角度 | 番号 | 0 | (limit_move=trueの場合、angle=n*90) | 画像の回転角度 | いいえ |
| min_scale | 番号 | 0.5 | 無制限 | 画像の最小ズーム率 | いいえ |
| max_scale | 番号 | 2 | 無制限 | 画像の最大ズーム率 | いいえ |
| バインドロード | 関数 | ヌル | 関数名 | クロッパーの初期化が完了しました | いいえ |
| バインドイメージロード | 関数 | ヌル | 関数名 | 画像がロードされ、戻り値は Object{width, height, path, type, etc.} になります。 | いいえ |
| バインドタップカット | 関数 | ヌル | 関数名 | 中央のトリミングボックスをクリックすると、値 Object{src,width,height} が返されます。 | いいえ |
| 関数名 | パラメータ | 戻り値 | 説明する | パラメータは必須です |
|---|---|---|---|---|
| アップロード | なし | なし | wx アップロード画像インターフェイスを呼び出してトリミングを開始します | いいえ |
| プッシュイメージ | 送信元 | なし | 画像を挿入してトリミングを開始します | はい |
| getImg | 関数(コールバック関数) | Object{url,width,height} | 画像をトリミングして取得します (画像のサイズ = 画像の幅と高さ * export_scale) | はい |
| X、Y | なし | クロップ枠の位置を設定する | はい | |
| カットサイズを設定 | 幅、高さ | なし | クロップボックスのサイズを設定する | はい |
| setCutCenter | なし | なし | クロップ枠を中央に設定 | いいえ |
| セットスケール | 規模 | なし | 画像のスケーリング率を設定します (min_scale、max_scale の影響を受けません) | はい |
| セット角度 | 度 | なし | 画像の回転角度を設定（トランジション効果あり） | はい |
| setTransform | {x,y,角度,スケール,カットX,カットY} | なし | オリジナルに基づいた画像の変更 (スケールは min_scale、max_scale の影響を受けます) | 必要に応じてパラメータを渡します |
| 画像リセット | なし | なし | 画像の角度、ズーム、位置をリセットします (onloadImage コールバックで使用できます) | いいえ |
デモのアドレス: https://github.com/wx-plugin/image-cropper-demo
クリックしてコード スニペットをインポートします
何か良い提案がありましたら、課題やPRを提出してください。
