js jquery は画像トリミング function_jquery を実装します

現在、大手ウェブサイトのパーソナルセンターを利用すると、個人のアバターをアップロードする機能があります。ユーザーが個人の写真をアップロードした後、それが Web サイトの要件を満たしていない可能性があるため、ユーザーは写真をトリミングするように求められ、最終的にユーザーのトリミングされたサイズに基づいてアバターが生成されます。この機能は本当に素晴らしい、jsを理解していなかった私にはすごい、すごいと感じました。いつか内部のテクノロジーを理解できるようになると思っていました、それはなんて素晴らしいことでしょう～皆さんも私と同じ考えですか～ははは～～

JavaScriptを使用してこの機能を実装してみましょう。

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

http://www.w3.org/1999/xhtml">

 

使用方法

    

$("#container").clip({
  imgC : $("#imgC"),
        blockClass : "block",
        tipsClass  : "tips"       
 });

   

imgC : 表示裁剪图片的容器,也就是右边的图

   

blockClass : block的样式名  也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名  默认是block

   

tipsClass  : tips的样式名   也就是页面上显示left width height top的那个span的样式名 默认是tips

 
• 
       
  
     

   
• 
       
  
     

">http://common.cnblogs.com/script/jquery.js">>

\
     

\
     

\
     

\
     

\
     

\
     

\
     

\
       ')
   .bind("mousedown.r",function(e){self.start(e)})
   .appendTo(this.container[0]);
   this.tips = $('').appendTo(this.container[0]);
   this.setImg();
  }、
  setImg : function(){
   var block = this.block;
   var left = block.css("left"),
    トップ = block.css("トップ"),
    高さ = block.height(),
    width = block.width();
   this.imgC.css({
    高さ: 高さ、
    幅 : 幅、
    "background-position" : "-" 左 " -" 上
   });
   this.tips.html("left:" parseInt(left) "top:" parseInt(top) "width:" width " 高さ:" 高さ "");
  }、
  start : function(e){
   var $elem = $(e.target),
    ブロック = this.block,
    自分 = これ、
    move = false,
    コンテナ = this.container,
    アクション = $elem.attr("アクション");
   // この次都要計算は基本的に dom 構造の変更 浏览器の解放 都市让里面の值発行変更
   this.offset = $.extend({height:container.height(),width:container.width()},container.offset());
   this.blockOriginal = {height:block.height(),width:block.width(),left:parseInt(block.css("left")),top:parseInt(block.css("top"))};
   if(アクション){
    this.fun = this[アクション];    
   }その他{
    this.x = e.clientX - this.offset.left - this.blockOriginal.left ;
    this.y = e.clientY - this.offset.top - this.blockOriginal.top;
    move = true;
   }
   つまり
    &&this.block[0].setCapture();
   this.tips.show();
   $(ドキュメント)
    .bind("mousemove.r",function(e){self.move(e,move)})
    .bind("mouseup.r",function(){self.end()});   
  }、
  end : function(){
   $(ドキュメント)
    .unbind("mousemove.r")
    .unbind("mouseup.r");
   つまり
    &&this.block[0].releaseCapture();
   this.tips.hide(); 
  }、
  移動: function(e,isMove){
   window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
    
   var block = this.block; 
   if(isMove){
    var left = Math.max(0,e.clientX - this.offset.left - this.x);
    left = Math.min(left,this.offset.width - this.blockOriginal.width);
    var top = Math.max(0,e.clientY - this.offset.top - this.y);
    top = Math.min(top,this.offset.height - this.blockOriginal.height);
    block.css({left:left,top:top});    
   }その他{
    var offset = this.fun(e);
    block.css(オフセット);
   }
   
   this.setImg();
   this.moveCallBack();
  }、
  down : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), //出现垂直方向滚动条時候要计算这个
    オフセット = this.offset;
    
   if(e.clientY-offset.top>=blockOriginal.top-sTop){
    var height = Math.min(offset.height - blockOriginal.top,e.clientY-offset.top-blockOriginal.top sTop),
     トップ = blockOriginal.top;
   }その他{
    var height = Math.min(offset.top blockOriginal.top-e.clientY-sTop,blockOriginal.top),
     top = Math.max(e.clientY - offset.top sTop,0);
   }
   return {高さ:高さ、上:上};
  }、
  up : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
    オフセット = this.offset;
   if(e.clientY-offset.top-blockOriginal.height     var top = Math.max(e.clientY-offset.top sTop,0),
     maxHeight = blockOriginal.top blockOriginal.height,
     height = Math.min(maxHeight,blockOriginal.top blockOriginal.height -(e.clientY-offset.top)-sTop);     
   }その他{
    var height = Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height sTop,offset.height-blockOriginal.top-blockOriginal.height),
     トップ = blockOriginal.top blockOriginal.height;  
   }
   return {高さ:高さ、上:上};
  }、
  左: function(e){
   var blockOriginal = this.blockOriginal,
    オフセット = this.offset;
    
   if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left     var left = Math.max(e.clientX - offset.left,0),
     width = Math.min(blockOriginal.left blockOriginal.width,blockOriginal.left blockOriginal.width -(e.clientX-offset.left));
   }その他{
    var width = Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
     left = blockOriginal.left blockOriginal.width;
   }
   return {left : left, width : width};
  }、
  右: 関数(e){
   var blockOriginal = this.blockOriginal,
    オフセット = this.offset;
   if(e.clientX-offset.left>=blockOriginal.left){
    var width = Math.min(offset.width - blockOriginal.left,e.clientX - offset.left - blockOriginal.left),
     left = blockOriginal.left;
   }その他{
    var width = Math.min(offset.left blockOriginal.left - e.clientX,blockOriginal.left),
     left = Math.max(e.clientX - offset.left,0);
   }
   return {left : left, width : width};
  }、
  rightDown : function(e){
   return $.extend(this.right(e),this.down(e));  
  }、
  leftDown : function(e){
   return $.extend(this.left(e),this.down(e));
  }、
  rightUp : function(e){
   return $.extend(this.right(e),this.up(e));
  }、
  leftUp : function(e){
   return $.extend(this.left(e),this.up(e));
  }、
  getValue : function(){
   var block = this.block;
   戻り値 {
    left : parseInt(block.css("left")),
    トップ : parseInt(block.css("top")),
    幅 : block.width(),
    高さ : block.height()
   }
  }
 }
 $.fn.clip = 関数(オプション){
  options.container = this;
  新しいクリップを返す(オプション);
 }
})();
 xx = $("#コンテナ").clip({
  imgC : $("#imgC")
 })

は、極度の酷評、小さな伴侶、学習本の例の思考回路ではありません。