画像切り抜き用の JQuery Jcrop プラグイン_jquery-jsチュートリアル-php.cn

画像切り抜き用の JQuery Jcrop プラグイン_jquery

WBOY

リリース： 2016-05-16 18:52:28

オリジナル

1258 人が閲覧しました

効果は以下のとおりです
画像切り抜き用の JQuery Jcrop プラグイン_jquery
最初に「コードを実行」して実行してみて、実行後にリフレッシュして感触を掴んでください:

<img  src="http://img.jb51.net/jslib/images/flowers.jpg" id="cropbox" alt="画像切り抜き用の JQuery Jcrop プラグイン_jquery" >
    <a href="http://www.jb51.net/">
    </a>
            
 
スクリプトホーム

[Ctrl A すべて選択注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]
このプロジェクトは現在行われていますユーザーのアバター機能を使用するには、ユーザーが写真をアップロードし、画像のトリミング方法を使用してアバターを選択できるのが最善であるとリーダーは述べました。同僚が Jcrop プラグインを勧めました。インターネット速度が遅すぎる場合は、公式サイト http://deepliquid.com/content/Jcrop.html にアクセスしてください。圧縮パッケージの最新バージョンをダウンロードしました。これには、Jcrop のいくつかのデモファイル、主要な Jcrop.js ファイル、および jQuery.Jcrop.css ファイルが含まれています。基本的に、このプラグインの使用方法は、いくつかのデモファイルを参照することで学習できます。たまたま夕方に少し勉強したので、英語が苦手な友達にも便利なように、以下のように簡単にまとめます。プラグインを使用するために必要な条件: jQuery.js ファイルのインポート、jQuery.Jcrop.js ファイルのインポート、および JQuery.Jcrop.css ファイルのインポート。

1. 最も基本的な使用法

HTML コード部分: コードをコピーします

は次のとおりです:

js 部分: コードをコピー

 コードは次のとおりです:


$( 
function() 
{ 
$("#demoImage ").Jcrop(); 

}
);

このようにして画像をトリミングできます。
2. 選択した領域の座標とコールバック関数を取得します。

HTML コード部分は次のとおりです。コードをコピー

コードは次のとおりです。

;x1
y1
x2
y2

width
height<入力タイプ="テキスト" id="txt高さ" />

$(function(){ 
//Event processing
$("#demoImage").Jcrop({ 
onChange:showCoords, //When the selection area changes, execute Corresponding callback function 
onSelect:showCoords //When an area is selected, execute the corresponding callback function 
}); 
}); 
function showCoords(c) { 
$(" #txtX1").val(c.x); //Get the abscissa coordinate of the upper left corner of the selected area
$("#txtY1").val(c.y); //Get the ordinate coordinate of the upper left corner of the selected area
$(" #txtX2").val(c.x2); //Get the abscissa of the lower right corner of the selected area
$("#txtY2").val(c.y2); //Get the ordinate of the lower right corner of the selected area
$("#txtWidth").val(c.w); //Get the width of the selected area
$("#txtHeight").val(c.h); //Get the height of the selected area
}

3. Common option settings

Copy code The code is as follows:

aspectRatio: The selected area is based on the width/height ratio, 1 means square. 
minSize: minimum width and height values. 
maxSize: the maximum width and height value. 
setSelect: Set the initial selected area. 
bgColor: Background color 
bgOpacity: Background transparency. 
allowResize: Whether to allow changing the size of the selected area. 
allowMove: Whether to allow moving the selected area. 

For example:

Copy the code The code is as follows:

 $(function() { 
$("#demoImage").Jcrop({ 
aspectRatio: 1, //The aspect ratio of the selected area is 1, that is, the selected area is a square
bgColor:"#ccc ", //The background color is set to gray when cropping
bgOpacity:0.1, //The transparency is set to 0.1 
allowResize:false, //The size of the selected area is not allowed to change
setSelect:[0,0,100,100] //Initialize the selected area
}); 
});

4.api usage

Copy code The code is as follows:

var api = $.Jcrop("#demoImage"); 
api.disable(); //Set to Disable the cropping effect
api.enable(); //Set to enable the cropping effect
api.setOptions({allowResize:false});//Set the corresponding configuration
api.setSelect([0,0,100,100] ); //Set the selected area

Download address:http://www.jb51.net/jiaoben/24768.html