jQuery ユーザー アバター トリミング プラグイン Cropbox.js サンプル共有

この記事では主にjQueryユーザーアバタートリミングプラグインcropbox.jsの使い方を詳しく紹介していますので、興味のある方は参考にしていただければ幸いです。

ほぼすべての Web ページには必須の画像アップロード機能と画像トリミング機能があり、この機能は Cropbox.js プラグインを通じて実装されています。

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropbox.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: &#39;.thumbBox&#39;,
      spinner: &#39;.spinner&#39;,
      imgSrc: &#39;images/avatar.png&#39;
    }
    var cropper = $(&#39;.imageBox&#39;).cropbox(options);
    $(&#39;#file&#39;).on(&#39;change&#39;, function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $(&#39;.imageBox&#39;).cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $(&#39;#btnCrop&#39;).on(&#39;click&#39;, function(){
      var img = cropper.getDataURL();
      $(&#39;.cropped&#39;).append(&#39;<img src="&#39;+img+&#39;">&#39;);
    })
    $(&#39;#btnZoomIn&#39;).on(&#39;click&#39;, function(){
      cropper.zoomIn();
    })
    $(&#39;#btnZoomOut&#39;).on(&#39;click&#39;, function(){
      cropper.zoomOut();
    })
  });
</script>

関連する推奨事項:

JQuery 画像トリミング プラグイン

最新の 5 つの jQuery 画像トリミング プラグイン

jQuery 画像アップロードおよびトリミング プラグイン Croppie_jquery

以上がjQuery ユーザー アバター トリミング プラグイン Cropbox.js サンプル共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。