jQuery は画像アップロードおよびトリミング プラグイン Croppie_jquery を実装します

多くのアプリケーションでは、ローカル画像をアップロードし、Web サイトの画像サイズ要件を満たすために適切にトリミングする必要があります。最も一般的なのは、各ユーザー システムがユーザーにアバターのアップロードとトリミングを要求するアプリケーションです。今日は、HTML5 と jQuery に基づいた画像アップロードおよびトリミング プラグイン、その名を Croppie として紹介します。

オペレーションレンダリング:

HTML
まず、関連する js および css ファイルを head に読み込みます。

<script src="jquery.min.js"></script> 
<script src="croppie.min.js"></script> 
<link rel="stylesheet" href="croppie.css"> 

次に、ページに画像アップロード ボタンを配置します。CSS を使用して、type="file" のファイル選択コントロールをボタン スタイルに変換します。画像を選択したら、画像をアップロードし、#upload-demo でトリミング プラグイン Croppie を呼び出します。 #result は、トリミングされた画像を表示するために使用されます。

<div class="actions"> 
  <button class="file-btn"> 
    <span>上传</span> 
    <input type="file" id="upload" value="选择图片文件" /> 
  </button> 
  <div class="crop"> 
    <div id="upload-demo"></div> 
    <button class="upload-result">裁剪</button> 
  </div> 
  <div id="result"></div> 
</div> 

CSS
次の CSS コードを使用して、ファイル選択コントロールをボタン スタイルに完全に変換します。実際に、type="file" の透明度を 0 に設定し、ボタンと重ねます。また、画像のトリミング領域.cropを非表示に設定し、ファイルを選択した後に表示します。

button, 
a.btn { 
  background-color: #189094; 
  color: white; 
  padding: 10px 15px; 
  border-radius: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.5); 
  font-size: 16px; 
  cursor: pointer; 
  text-decoration: none; 
  text-shadow: none; 
} 
button:focus { 
  outline: 0; 
} 
 
.file-btn { 
  position: relative; 
} 
.file-btn input[type="file"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
} 
 
.actions { 
  padding: 5px 0; 
} 
.actions button { 
  margin-right: 5px; 
} 
.crop{display:none} 

jQuery
まず、HTML5 の FileReader API を使用してローカル ファイルを読み取り、次に $('#upload-demo').croppie() が Croppie プラグインを呼び出します。 Croppie のオプション ビューポート: トリミングされた画像の幅と高さ、およびタイプ (円または正方形) を設定できます。オプションの境界は画像の周囲のサイズです。また、mouseWheelZoom: 画像のマウス ホイール ズームをサポートするかどうか、showZoom: ズーム バー ツールを表示するかどうか、update: コールバック関数もあります。

$(function(){ 
  var $uploadCrop; 
 
    function readFile(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
         
        reader.onload = function (e) { 
          $uploadCrop.croppie('bind', { 
            url: e.target.result 
          }); 
        } 
         
        reader.readAsDataURL(input.files[0]); 
      } 
      else { 
        alert("Sorry - you're browser doesn't support the FileReader API"); 
      } 
    } 
 
    $uploadCrop = $('#upload-demo').croppie({ 
      viewport: { 
        width: 200, 
        height: 200, 
        type: 'circle' 
      }, 
      boundary: { 
        width: 300, 
        height: 300 
      } 
    }); 
 
    $('#upload').on('change', function () { 
      $(".crop").show(); 
      readFile(this); 
    }); 
    $('.upload-result').on('click', function (ev) { 
      $uploadCrop.croppie('result', 'canvas').then(function (resp) { 
        popupResult({ 
          src: resp 
        }); 
      }); 
    }); 
     
  function popupResult(result) { 
    var html; 
    if (result.html) { 
      html = result.html; 
    } 
    if (result.src) { 
      html = '<img src="' + result.src + '" />'; 
    } 
    $("#result").html(html); 
  } 
}); 

「Crop」ボタンをクリックした後、Croppie の result メソッドを再度呼び出して、トリミングされた画像を返し、#result に表示します。

上記は、画像のアップロードとトリミングを実装する jQuery の主なプロセスです。皆さんが画像のアップロードとトリミングの技術を学ぶのに役立つことを願っています。