ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jqueryをベースにした画像切り出しプラグイン
jQuery_jqueryをベースにした画像切り出しプラグイン
- WBOYオリジナル
- 2016-05-16 18:03:561089ブラウズ
ステップ 1: ワークスペースを確立する
まず、チュートリアル用のワークスペースを作成し、図に示すようにファイル階層を確立し、対応する空のファイルを作成する必要があります。
< ;title>
< ;/head>
[/code]
🎜>
コードをコピーします
コードは次のとおりです。 * { margin : 0; 🎜>outline : 0; padding : 0; }
/*Web ページのスタイルを初期化します*/ body {
background-color : #ededed; ;
フォントファミリー : 'Verdana'、'Geneva'、サンセリフ;
フォントサイズ : 12px;
テキストシャドウ : 0 1px 0 #ffffff; {
フォントサイズ : 24px;
マージン : 0 0 10px 0;
}
div#wrapper {
マージン : 25px 25px 25px 25px;
}
/*ラッパーの ID を持つ div を選択*/
div.image-decorator {
-moz-border-radius : 5px 5px 5px 5px;/*Firefox のボックスのシャープ化ブラウザ* /
-moz-box-shadow : 0 0 6px #c8c8c8;/*Firefox ブラウザ用ボックスのボーダーシャドウ処理*/
-webkit-border-radius : 5px 5px 5px 5px;/*WebKitオープンソースのブラウザ エンジンです*/
-webkit-box-shadow : 0 0 6px #c8c8c8;
background-color : #ffffff;
border : 1px sold #c8c8c8; : 5px 5px 5px 5px;
box-shadow : 0 0 6px #c8c8c8;
display : inline-block; /* オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングします。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。サポートされているブラウザは次のとおりです: Opera、Safari*/
高さ : 360px;
幅 : 480px;
背景色を変更し、いくつかの基本スタイルを設定すると、ページをより読みやすくすることができます。
ステップ 3: 基本的な jQuery プラグインを作成する
読者であるあなたが jQuery プラグインを作成した経験がない場合は、作成する前に、基本的な jQuery プラグインを作成してみましょう。最初に公式のプラグイン チュートリアル (http://docs.jquery.com/Plugins/Authoring) を読むことをお勧めします。これは英語版ですが、中国語版は見つかりません。作者は翻訳する予定なので、そのままにしておいてください。調整した。
/resources/js/imageCrop/jquery.imagecrop.js を開き、以下に示すように JS コードを追加します
コードをコピーします
コードは次のとおりです。
background-color : #ededed; ;
フォントファミリー : 'Verdana'、'Geneva'、サンセリフ;
フォントサイズ : 12px;
テキストシャドウ : 0 1px 0 #ffffff; {
フォントサイズ : 24px;
マージン : 0 0 10px 0;
}
div#wrapper {
マージン : 25px 25px 25px 25px;
}
/*ラッパーの ID を持つ div を選択*/
div.image-decorator {
-moz-border-radius : 5px 5px 5px 5px;/*Firefox のボックスのシャープ化ブラウザ* /
-moz-box-shadow : 0 0 6px #c8c8c8;/*Firefox ブラウザ用ボックスのボーダーシャドウ処理*/
-webkit-border-radius : 5px 5px 5px 5px;/*WebKitオープンソースのブラウザ エンジンです*/
-webkit-box-shadow : 0 0 6px #c8c8c8;
background-color : #ffffff;
border : 1px sold #c8c8c8; : 5px 5px 5px 5px;
box-shadow : 0 0 6px #c8c8c8;
display : inline-block; /* オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングします。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。サポートされているブラウザは次のとおりです: Opera、Safari*/
高さ : 360px;
幅 : 480px;
背景色を変更し、いくつかの基本スタイルを設定すると、ページをより読みやすくすることができます。
ステップ 3: 基本的な jQuery プラグインを作成する
読者であるあなたが jQuery プラグインを作成した経験がない場合は、作成する前に、基本的な jQuery プラグインを作成してみましょう。最初に公式のプラグイン チュートリアル (http://docs.jquery.com/Plugins/Authoring) を読むことをお勧めします。これは英語版ですが、中国語版は見つかりません。作者は翻訳する予定なので、そのままにしておいてください。調整した。
/resources/js/imageCrop/jquery.imagecrop.js を開き、以下に示すように JS コードを追加します
コードをコピーします
コードは次のとおりです。
//通常は、'(function($) { // ここにプラグイン コード}) (jQuery); に記述したプラグイン コードを含めてください。 '
(function($) {
$.imageCrop = function(object,customOptions) {};
$.fn.imageCrop = function (customOptions) {
//各オブジェクトを反復処理します
/ /各オブジェクトを反復処理します this.each(function () { var currentObject = this, image = new Image(); //オブジェクトが読み込まれるときに、ImageCrop を追加しますCutting function image.onload = function () { $.imageCrop(currentObject,customOptions)
}; //画像がキャッシュされている場合があるため、画像のアドレスをリセットします。 Quick image.src = currentObject.src;
});
//プラグインが特定の値を返さない限り、関数は通常、'this' キーワードを返す必要があります
//これはプログラミングを連鎖し続けるために使用されます
}) (jQuery);
jQuery.fn オブジェクトに新しいメソッド属性を追加して、jQuery を拡張しました。これで、各オブジェクトを反復処理し、ロード時に imageCrop 関数をそれにアタッチする基本的なプラグインが完成しました。キャッシュされた画像はすぐにはダウンロードされない可能性があるので、画像アドレスをリセットします。
ステップ 4: カスタマイズ可能なオプションを追加する
カスタマイズ可能なオプションを使用すると、ユーザーの選択肢が増え、プラグインの柔軟性が高まります。 (注: 次のコードは順番に並んでいます)
/ / プラグインのオプションを定数オブジェクトにカプセル化することは、渡すパラメーターの長いリストを渡すよりもはるかに優れています。
//これにより、プラグインでデフォルトで拡張が可能になります。
vardefaultOptions = {
allowMove: true,
allowResize: true,
allowSelect: true,
minSelect: [ 0 、0]、
outlineOpacity: 0.5、
overlayOpacity: 0.5、
selectionPosition: [0, 0]、
selectionWidth: 0、
selectionHeight: 0
};
// オプションをデフォルトのオプションとして設定します
var options =defaultOptions;
// それを顧客がカスタマイズしたオプションとマージします
setOptions(customOptions);
上記では、デフォルト オプションを含む配列を定義し、setOption 関数を使用してデフォルト オプションとカスタマイズされたオプションをマージします。次に、マージ関数の本体を記述します
allowMove – 選択範囲を移動できるかどうかを指定します (デフォルト値は true)。
allowResize –選択領域のサイズを変更できるかどうかを指定します (デフォルト値は true)
allowSelect – ユーザーが選択領域のサイズを変更できるかどうかを指定します (デフォルト値は true)
minSelect – 新しい選択領域の最小サイズ (デフォルトのサイズは [0, 0] です)
outlineOpacity – アウトラインの透明度 (デフォルト値は 0.5)
overlayOpacity – オーバーレイの透明度 (デフォルト値は 0.5)
selectionPosition –選択領域の位置 (デフォルトは [0, 0])
selectionWidth – 選択領域の幅 (デフォルト値は 0)
selectionHeight – 選択領域の長さ (デフォルト値は 0)
ステップ 5: 画像レイヤーを作成します
このステップでは、次のステップであるプラグインの表面に備えてドキュメントの構造を変更します
最初に画像レイヤーを初期化し、次に画像を含むレイヤーを初期化する必要があります。
コードをコピー
コードをコピーします
});
//プラグインが特定の値を返さない限り、関数は通常、'this' キーワードを返す必要があります
//これはプログラミングを連鎖し続けるために使用されます
}) (jQuery);
jQuery.fn オブジェクトに新しいメソッド属性を追加して、jQuery を拡張しました。これで、各オブジェクトを反復処理し、ロード時に imageCrop 関数をそれにアタッチする基本的なプラグインが完成しました。キャッシュされた画像はすぐにはダウンロードされない可能性があるので、画像アドレスをリセットします。
ステップ 4: カスタマイズ可能なオプションを追加する
カスタマイズ可能なオプションを使用すると、ユーザーの選択肢が増え、プラグインの柔軟性が高まります。 (注: 次のコードは順番に並んでいます)
コードをコピーします コードは次のとおりです:
/ / プラグインのオプションを定数オブジェクトにカプセル化することは、渡すパラメーターの長いリストを渡すよりもはるかに優れています。
//これにより、プラグインでデフォルトで拡張が可能になります。
vardefaultOptions = {
allowMove: true,
allowResize: true,
allowSelect: true,
minSelect: [ 0 、0]、
outlineOpacity: 0.5、
overlayOpacity: 0.5、
selectionPosition: [0, 0]、
selectionWidth: 0、
selectionHeight: 0
};
// オプションをデフォルトのオプションとして設定します
var options =defaultOptions;
// それを顧客がカスタマイズしたオプションとマージします
setOptions(customOptions);
上記では、デフォルト オプションを含む配列を定義し、setOption 関数を使用してデフォルト オプションとカスタマイズされたオプションをマージします。次に、マージ関数の本体を記述します
コードをコピーします コードは次のとおりです: // デフォルトのオプションと顧客がカスタマイズしたオプションはマージされます
function setOptions(customOptions) { options = $.extend(options,customOptions)
}; .extend() この関数は、2 つ以上のオブジェクトを最初のオブジェクトにマージする関数を実装します。
オプション
次のリストは、プラグインの各オプションについて説明しています。
}; .extend() この関数は、2 つ以上のオブジェクトを最初のオブジェクトにマージする関数を実装します。
オプション
次のリストは、プラグインの各オプションについて説明しています。
allowMove – 選択範囲を移動できるかどうかを指定します (デフォルト値は true)。
allowResize –選択領域のサイズを変更できるかどうかを指定します (デフォルト値は true)
allowSelect – ユーザーが選択領域のサイズを変更できるかどうかを指定します (デフォルト値は true)
minSelect – 新しい選択領域の最小サイズ (デフォルトのサイズは [0, 0] です)
outlineOpacity – アウトラインの透明度 (デフォルト値は 0.5)
overlayOpacity – オーバーレイの透明度 (デフォルト値は 0.5)
selectionPosition –選択領域の位置 (デフォルトは [0, 0])
selectionWidth – 選択領域の幅 (デフォルト値は 0)
selectionHeight – 選択領域の長さ (デフォルト値は 0)
ステップ 5: 画像レイヤーを作成します
このステップでは、次のステップであるプラグインの表面に備えてドキュメントの構造を変更します
最初に画像レイヤーを初期化し、次に画像を含むレイヤーを初期化する必要があります。
コードをコピー
コードは次のとおりです: // 画像レイヤーを初期化します var $image = $(object); // 画像サポート レイヤーを初期化します
var $holder = $(' ') .css({
position: 'relative'
})
.width($image.width())
.height($image.height());
// image はホルダー層に含まれます。wrap() 関数
$image.wrap($holder)
。 css({
position: 'absolute'
});
ご覧のとおり、含まれるレイヤーと画像は同じサイズであり、相互に相対的に配置されています。次に、.wrap 関数を使用して、画像をその中に含めます
画像の上にオーバーレイがあります:
position: 'relative'
})
.width($image.width())
.height($image.height());
// image はホルダー層に含まれます。wrap() 関数
$image.wrap($holder)
。 css({
position: 'absolute'
});
ご覧のとおり、含まれるレイヤーと画像は同じサイズであり、相互に相対的に配置されています。次に、.wrap 関数を使用して、画像をその中に含めます
画像の上にオーバーレイがあります:
コードをコピー
コードは次のとおりです: //オーバーレイを初期化し、画像の上に配置します var $overlay = $('') .css({ opacity: options.overlayOpacity,
position: 'absolute' })
.width($image.width( ))
.height($image.height())
.insertAfter($image);
このレイヤーも画像と同じサイズですが、絶対に配置されます。 options.outlineOpacity から透明度を取得します。この要素には ID があるため、プラグインを介して CSS を変更することでスタイルを変更できます。最後に、.insertAfter($image) メソッドを使用して、画像レイヤーのすぐ下にオーバーレイを配置します。
下の層はトリガー層です
.width($image.width( ))
.height($image.height())
.insertAfter($image);
このレイヤーも画像と同じサイズですが、絶対に配置されます。 options.outlineOpacity から透明度を取得します。この要素には ID があるため、プラグインを介して CSS を変更することでスタイルを変更できます。最後に、.insertAfter($image) メソッドを使用して、画像レイヤーのすぐ下にオーバーレイを配置します。
下の層はトリガー層です
コードをコピーします
コードは次のとおりです:
//トリガーレイヤーを初期化し、オーバーレイの上に配置します
var $trigger = $('')
.css({
backgroundColor: '#000000',
不透明度: 0,
位置: 'absolute'
})
.width($image.width())
.height($image.height() )
.insertAfter($overlay);
今回はユーザーには表示されませんが、いくつかのイベントを処理します。
次は境界線レイヤーと選択レイヤーです
//境界線レイヤーを初期化し、トリガーレイヤーの上に配置します
var $outline = $('')
.css ({
opacity: options.outlineOpacity,
position: 'absolute'
})
.insertAfter($trigger);
// 選択レイヤーを初期化し、境界線レイヤーの上に設定します
var $selection = $('')
.css({
background: 'url(' $image.attr('src') ' ) no-repeat',
position: 'absolute'
})
.insertAfter($outline);
.attr() メソッドは、特定の属性の値を使用して、画像のアドレスを取得し、選択レイヤーの背景として使用します
相対配置内の絶対配置
相対的に配置された要素は、絶対的な配置を制御できます絶対位置の要素が相対位置の要素の内側になるように、 位置要素 を配置します。これは、包含レイヤーが相対的に配置され、そのすべての子要素が絶対的に配置される理由でもあります
ステップ 6: インターフェイスを更新します
最初にいくつかのグローバル変数
//グローバル変数を初期化します
var selectedExists,
selectionOffset = [0, 0],
selectionOrigin = [0, 0];
selectionExists は選択領域があるかどうかを示し、selectionOffset には開始点に対する相対的なオフセットが含まれます。 selectionOrigin 選択領域の開始点が含まれます
プラグインのロード時に選択領域が存在するために次の条件が使用されます
//選択領域のサイズが最小値よりも大きいかどうかを示し、それに基づいて選択領域が存在するかどうかを設定します。
if (options.selectionWidth > options.minSelect[0] &&
options.selectionHeight > options.minSelect[1])
selectionExists = true;
else
selectionExists = false;
ここで、updateInterface を呼び出してプラグインを初期化します。 インターフェース
//初めて「uploadInterface」関数を呼び出して、プラグイン インターフェース
updateInterface(); >
//トリガーレイヤーを初期化し、オーバーレイの上に配置します
var $trigger = $('')
.css({
backgroundColor: '#000000',
不透明度: 0,
位置: 'absolute'
})
.width($image.width())
.height($image.height() )
.insertAfter($overlay);
今回はユーザーには表示されませんが、いくつかのイベントを処理します。
次は境界線レイヤーと選択レイヤーです
コードをコピーします コードは次のとおりです:
//境界線レイヤーを初期化し、トリガーレイヤーの上に配置します
var $outline = $('')
.css ({
opacity: options.outlineOpacity,
position: 'absolute'
})
.insertAfter($trigger);
// 選択レイヤーを初期化し、境界線レイヤーの上に設定します
var $selection = $('')
.css({
background: 'url(' $image.attr('src') ' ) no-repeat',
position: 'absolute'
})
.insertAfter($outline);
.attr() メソッドは、特定の属性の値を使用して、画像のアドレスを取得し、選択レイヤーの背景として使用します
相対配置内の絶対配置
相対的に配置された要素は、絶対的な配置を制御できます絶対位置の要素が相対位置の要素の内側になるように、 位置要素 を配置します。これは、包含レイヤーが相対的に配置され、そのすべての子要素が絶対的に配置される理由でもあります
ステップ 6: インターフェイスを更新します
最初にいくつかのグローバル変数
を初期化する必要があります>コードをコピー コードは次のとおりです:
//グローバル変数を初期化します
var selectedExists,
selectionOffset = [0, 0],
selectionOrigin = [0, 0];
selectionExists は選択領域があるかどうかを示し、selectionOffset には開始点に対する相対的なオフセットが含まれます。 selectionOrigin 選択領域の開始点が含まれます
プラグインのロード時に選択領域が存在するために次の条件が使用されます
コードをコピー コードは次のとおりです:
//選択領域のサイズが最小値よりも大きいかどうかを示し、それに基づいて選択領域が存在するかどうかを設定します。
if (options.selectionWidth > options.minSelect[0] &&
options.selectionHeight > options.minSelect[1])
selectionExists = true;
else
selectionExists = false;
ここで、updateInterface を呼び出してプラグインを初期化します。 インターフェース
//初めて「uploadInterface」関数を呼び出して、プラグイン インターフェース
updateInterface(); >
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。