jquery imgareaselect は js とプログラムを使用して画像切断を実現します

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

/*
現在 ff3 で、jquery の width() 関数と height() 関数を使用すると、画像の幅と高さが設定されていない場合、画像に必要な
を設定できません。ロード関数内でのみ初期化可能です。
*/
sanshi_imgaraselect = function(pic_id,view_div_id){
this.pic_obj = jQuery("#" pic_id);
this.pic_width; 🎜> this.pic_height;
this.view_width = 100;
this.view_img_id = view_div_id "_sanshi_img"; .ias; 🎜 >}
//プレビュー画像を作成します
sanshi_imgaraselect.prototype.make_view_pic =function(){
var img_obj = jQuery(document.createElement("IMG")); attr("src ",this.pic_obj.attr("src"));
img_obj.attr("id",this.view_img_id);
img_obj.attr("width",this.view_width);
img_obj .attr("height",this.view_height);
return img_obj;
}
//初期化関数
sanshi_imgaraselect.prototype.init=function(){
this .pic_width = this .pic_obj.attr("width");
this.pic_height = this.pic_obj.attr("height");
//alert(this.pic_width ":" this.pic_height);
//画像を追加
jQuery("#" this.view_div_id).append(this.make_view_pic());
//プレビュー読み込みレイヤースタイルを設定
jQuery("#" this.view_div_id) ).css( {'width':this.view_width,'height':this.view_height,'overflow':'hidden'});
//選択領域を完成させる関数を構築します
var fun_str= "if (selection.width &&selection.height){ varscaleX = " this.view_width " /selection.width;varscaleY = " this.view_height " /selection.height;jQuery('#" this.view_img_id "')。 css({width: Math .round(scaleX * " this.pic_width "),height: Math.round(scaleY * " this.pic_height "),marginLeft: -Math.round(scaleX *selection.x1),marginTop: - Math.round(scaleY *selection.y1)});}";
//alert(fun_str);
//imgAreaSelect 関数を初期化します
var ias = this.pic_obj.imgAreaSelect({
//選択ボックスを設定します Ratio
// aspectRatio: "1:1",
追加効果を行います , // ピクチャーマスクレイヤーが表示されるかどうか
表示: true,
// API かどうか
インスタンス: TRUE,
// 選択ボックスを描画する初期関数を設定
oninit :function(img,selection){ias.setSelection(100, 50, 250, 150, true);ias.update();},
:function(img,selection){eval(fun_str);}
}); get メソッド
sanshi_imgaraselect.prototype.save_pic= によって送信されます。 function(post_page,post_param){
var opt = this.ias.getSelection(true);
var post_arr = new Array()
jQuery .each(post_param,function(i,n); 🎜> var temp_str =i "=";
temp_str = opt[n] ? opt[n] : n;
post_arr.push(temp_str)
//パラメータがあります
post_page = post_page.lastIndexOf("?")<0 ? "?" : "&";
// get メソッドの URL を組み立てます
post_url = post_page post_arr.join("& ");
アラート(post_url);
}

これはカプセル化された js コードです
このコードの使用方法を見てみましょう

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

 
$(document).ready(function () { 

 //関数を宣言 
 var sanshi_img = new sanshi_imgaraselect("mypic","preview"); 
 //上記のバグを回避するために、画像の読み込みが完了し、初期化関数が実行されていることを確認します。そうでない場合、互換性は保証されません。 
 $("#mypic").load(function(){sanshi_img.init ();}); 
 //保存イベントをリッスンします
 $("#save_pic").click(function(){ 
 sanshi_img.save_pic('1.php?n=6',{ "id":5," px1":"x1","py1":"y1",'px2':"x2","py2":"y2",'pwidth':"width",'pheight': "高さ"}); 
 }); コードは次のとおりです: 

 

人気のチュートリアル

詳細>

jquery imgareaselect は js とプログラムを使用して画像切断を実現します_jquery