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

効果は以下のとおりです

最初に「コードを実行」して実行してみて、実行後にリフレッシュして感触を掴んでください:

<style type="text/css"> body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat; } .jcrop-vline { height: 100%; width: 1px !important; } .jcrop-hline { width: 100%; height: 1px !important; } .jcrop-handle { font-size: 1px; width: 7px !important; height: 7px !important; border: 1px #eee solid; background-color: #333; *width: 9px; *height: 9px; } .jcrop-tracker { width: 100%; height: 100%; } .custom .jcrop-vline,.custom .jcrop-hline{ background: yellow; } .custom .jcrop-handle{ border-color: black; background-color: #C7BB00; -moz-border-radius: 3px; -webkit-border-radius: 3px; } </style> <img src="/static/imghw/default1.png" data-src="http://img.jb51.net/jslib/images/flowers.jpg" class="lazy" 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