jquery.Jcrop_jquery に基づくアバターエディター-jsチュートリアル-php.cn

jquery.Jcrop_jquery に基づくアバターエディター

WBOY

リリース： 2016-05-16 18:33:31

オリジナル

1053 人が閲覧しました

Sina Weiboを使用したことのある友人は、そのアバターエディターの印象を持っているかもしれませんが、
プロジェクトでは、最初はSina Weiboを直接使用したいと思っていました。
インターネット上で jquery.Jcrop を見つけましたが、これは単純な切り取りであり、サムネイルは生成されませんでした。これを必要とする人は多いかもしれません。
公式ウェブサイト: http://deepliquid.com/content/Jcrop.html
上記にはたくさんあります。興味があれば、ご覧ください。デモをチェックしてください。
この記事では、カプセル化された JS は次のとおりです:

コードをコピーしますコードは次のとおりです。

jQuery.UtrialAvatarCutter = function(config){
var h,w,x,y;
var os,oh,ow;
var api = null;
var sel = this;
var img_content_id = config.content;
var img_id = "img_" (Math.random() "").substr(3,8); new Array();
var select_width = null;
if(config.purviews){
for(i=0,c=config.purviews.length;i< c ; i){
purviews[purviews.length] = config.purviews[i];
}
}
check_thums_img = function(){
if(config.purviews){
for(i=0,c=config.purviews.length;iif($('#' config.purviews[i].id " img").length==0 ) {
$('#' config.purviews[i].id).html("

");
}else{
$( ' #' config.purviews[i].id " img").attr("src",os);
}
}
}
}
/*
*画像を再読み込み
*/
this.reload = function(img_url){
if(img_url!=null && img_url != ""){
os = img_url "?" ) ;
$("#" img_content_id).html("

");
$("#" img_id)。 binding ("load",
function(){
check_thums_img();
sel.init();
}
);
}
}
$ ( "#" img_content_id " img").attr("id",img_id);
varreview = function(c) {
if ( c.w == 0 || c.h == 0 ) {
api .setSelect([ x, y, x w, y h ]);
api.animateTo([ x, y, x w, y h ]);
x = c.x; 🎜 >y = c.y;
w = c.w;
for(i=0,c=purviews.length;ivar purviews[ i ];
var rx = purview.width / w;
$('#' purview.id " img").css({
width : Math.round(rx * ow) 'px',
高さ: Math.round(ry * oh) 'px',
marginLeft: '-' Math.round(rx * x) 'px',
marginTop: '-' Math.round(ry * y) 'px'
})
}
}
this.init = function(){
if(api ! =null){
api.destroy();
os = $("#" img_content_id " img").attr("src"); " )
return;
check_thums_img();
for(i=0,c=purviews.length;ivar purview = purviews[i];
var purview_content = $("#" purview.id);
purview_content.css({position: "relative", overflow:"hidden", height:purview.height "px", width:purview.width "px"
}
oh = $('#' img_id).height();
ow = $('#' img_id).width();
select_width = config.selector幅 ;
select_height = config.selector.height;
select_width = Math.min(ow,select_width);
select_height = Math.min(oh,select_height); select_width ) / 2);
y = ((oh - select_height) / 2);
//これは、Jcrop の他のさまざまな機能を変更するために変更します。
api = $.Jcrop ('#' img_id,{
aspectRatio: 1,
onChange: プレビュー,
onSelect: プレビュー
});
//選択ボックスのデフォルトの位置を設定します
api .animateTo( [ x, y, x select_width, y select_height ]);
}
this.submit = function(){
return {w:w,h:h,x:x,y: y,s :os};
}
}

これは比較的単純です。これ以上の詳細はありません
アプリケーション部分も非常に単純です
1. 必要なファイルをインポートします。
コード

コードをコピー

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

< ;script type="text/javascript " src="js/jQuery.UtrialAvatarCutter.js"> 2. 元の画像とサムネイルのコンテナを定義しますコード

コードをコピー

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