快捷導(dǎo)航

jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie

更新時(shí)間：2015年11月29日 10:44:16 投稿：lijiao

這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie，實(shí)現(xiàn)最常見(jiàn)的各用戶(hù)系統(tǒng)要求用戶(hù)上傳和裁剪頭像的應(yīng)用，感興趣的小伙伴們可以參考一下

在很多應(yīng)用需要上傳本地圖片然后再按尺寸適當(dāng)裁剪以符合網(wǎng)站對(duì)圖片尺寸的要求。最常見(jiàn)的就是各用戶(hù)系統(tǒng)要求用戶(hù)上傳和裁剪頭像的應(yīng)用。今天我給大家介紹的是一款基于HTML5和jQuery的圖片上傳和裁剪插件，它叫Croppie。

運(yùn)行效果圖：

HTML
首先我們將相關(guān)js和css文件載入head中。

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

接下來(lái)我們?cè)陧?yè)面上放置一個(gè)圖片上傳按鈕，我們可以用css將type="file"的文件選擇控件轉(zhuǎn)成按鈕樣式。選擇完圖片后，在#upload-demo展示上傳圖片，以及調(diào)用裁剪插件Croppie。#result用來(lái)展示裁剪后的圖片。

<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代碼，我們很完美的將選擇文件的控件轉(zhuǎn)成按鈕的樣式，其實(shí)就是將type="file"透明度設(shè)成0，然后和button重疊。此外，我們先將圖片裁剪區(qū)域.crop設(shè)置為不可見(jiàn)，等選擇文件后再顯示。

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()調(diào)用了Croppie插件。Croppie的選項(xiàng)viewport：可以設(shè)置所裁剪圖片的寬度和高度，以及類(lèi)型（圓形或方形）；選項(xiàng)boundary是圖片的外圍尺寸。它還有參數(shù)mouseWheelZoom：是否支持鼠標(biāo)滾輪縮放圖像；showZoom：是否展示縮放條工具；update：回調(diào)函數(shù)。

$(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); 
 } 
});

當(dāng)點(diǎn)擊“裁剪”按鈕后，再次調(diào)用Croppie的result的方法，返回一張裁剪后的圖片，并顯示在#result中。

更多精彩內(nèi)容請(qǐng)參考專(zhuān)題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

以上就是jQuery實(shí)現(xiàn)圖片上傳和裁剪的主要過(guò)程，希望對(duì)大家學(xué)習(xí)圖片上傳和裁剪技術(shù)有所幫助。

您可能感興趣的文章: