Alat pemangkasan avatar jQuery contoh penggunaan jcrop (dengan demonstrasi dan muat turun kod sumber demo)

Alat pemangkasan avatar jQuery contoh penggunaan jcrop (dengan demonstrasi dan muat turun kod sumber demo)_jquery

WBOY

Lepaskan： 2016-05-16 15:18:47

asal

1260 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan alat pemangkasan avatar jQuery jcrop. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Alat pemangkasan avatar yang paling popular ialah denyar dan jquery. Secara peribadi, saya fikir lebih baik menggunakan jquery, kerana jika anda mengkaji kod itu dengan teliti, anda pada dasarnya boleh memahami apa yang berlaku, dan lebih mudah untuk mengubahnya jika anda mahu.

Terdapat contoh, sila rujuk: demo contoh jcrop, yang diubah suai daripada contoh jcrop dan menambah dua ciri berikut:

1, dipaparkan di tengah, dan boleh diseret untuk menukar saiz pemintasan
2. Gambar yang dipratonton adalah berkadar dengan saiz seretan akar.

Berikut ialah kod js, yang hanya dikapsulkan

<!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>

Salin selepas log masuk

Jika jquery jcrop digabungkan dengan muat naik ajax jquery, muat naik avatar dan fungsi pemintasan boleh digunakan, yang sangat mesra pengguna.

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan pemalam jQuery boleh menyemak topik khas tapak ini: " Ringkasan pemalam dan penggunaan jQuery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.