jQuery アバタートリミングツール jcrop の使用例 (デモとデモソースコードのダウンロード付き)

jQuery アバタートリミングツール jcrop の使用例 (デモとデモソースコードのダウンロード付き)_jquery

WBOY

リリース： 2016-05-16 15:18:47

オリジナル

1287 人が閲覧しました

この記事の例では、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 プログラミングのすべての人に役立つことを願っています。