ホームページ > 記事 > ウェブフロントエンド > jQuery アバター トリミング ツール jcrop の使用例 (デモとデモ ソース コードのダウンロード付き)_jquery
jQuery アバター トリミング ツール jcrop の使用例 (デモとデモ ソース コードのダウンロード付き)_jquery
- WBOYオリジナル
- 2016-05-16 15:18:471260ブラウズ
この記事の例では、jQuery アバター トリミング ツール jcrop の使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
最も人気のあるアバタートリミングツールは、Flash と jQuery です。個人的には、コードを注意深く研究すれば何が起こっているかを基本的に理解でき、必要に応じて変更するのが簡単であるため、jquery を使用する方が良いと思います。
例があります。参照してください:jcrop サンプル デモ。これは、jcrop サンプルから変更され、次の 2 つの機能が追加されています。
1、中央に表示され、ドラッグしてインターセプトのサイズを変更できます
2. プレビューされた画像は、ルート ドラッグのサイズに比例します。
以下は単純にカプセル化された js コードです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>jcrop 图片拖动</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>上传头像拖动例子</h1>
<table>
<tr>
<td>
<img src="sago.jpg" id="target" alt="Flowers" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;" id="aa">
<img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
var oop = this;
this.option = {
x:170,
y:110,
w:350,
h:200,
t:'target',
p:'preview',
o:'aa'
}
this.init = function(){
oop.target();
}
this.target = function(){
$('#'+oop.option['t']).Jcrop({
onChange: oop.updatePreview,
onSelect: oop.updatePreview,
aspectRatio: 1,
setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ],
bgFade: true,
bgOpacity: .5
});
}
this.updatePreview = function(obj){
if (parseInt(obj.w) > 0)
{
var rx = $('#'+oop.option['o']).width()/ obj.w;
var ry = $('#'+oop.option['o']).height()/ obj.h;
$('#'+oop.option['p']).css({
width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px',
height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px',
marginLeft: '-' + Math.round(rx * obj.x) + 'px',
marginTop: '-' + Math.round(ry * obj.y) + 'px'
});
}
}
}
</script>
</html>
jquery jcrop と jquery ajax Upload を組み合わせると、アバターのアップロードとインターセプト機能が使用でき、非常に使いやすくなります。
完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください。
jQuery プラグインに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「一般的な jQuery プラグインと使用法の概要」
をチェックしてください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。