在很多應用需要上傳本地圖片然后再按尺寸適當裁剪以符合網站對圖片尺寸的要求。最常見的就是各用戶系統要求用戶上傳和裁剪頭像的應用。今天我給大家介紹的是一款基于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，然后和button重疊。此外，我們先將圖片裁剪區域.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的選項viewport：可以設置所裁剪圖片的寬度和高度，以及類型（圓形或方形）；選項boundary是圖片的外圍尺寸。它還有參數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); } }); 當點擊“裁剪”按鈕后，再次調用Croppie的result的方法，返回一張裁剪后的圖片，并顯示在#result中。
更多精彩內容請參考專題《ajax上傳技術匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。
以上就是jQuery實現圖片上傳和裁剪的主要過程，希望對大家學習圖片上傳和裁剪技術有所幫助。
新聞熱點
疑難解答
