使用場景
幾乎所有Web網(wǎng)站都會使用圖片。社交網(wǎng)站的用戶使用頭像標(biāo)識個性身份，曬圖分享個人動態(tài)；網(wǎng)購網(wǎng)站展示不同商品的圖片，以供消費者挑選；新聞網(wǎng)站發(fā)布圖片到文章中，增強(qiáng)渲染力；就連簡書這樣的文學(xué)性網(wǎng)站，也推薦在文章中插圖，以舒緩閱讀疲勞；多數(shù)網(wǎng)站提供favicon.ico圖片用以在瀏覽器標(biāo)簽欄上做標(biāo)識；多數(shù)網(wǎng)站都用創(chuàng)意性的Logo圖片展示在網(wǎng)站以提高辨識度和品牌形象。
圖片的展示
我們知道，圖片在Web頁面中的顯示，使用<img>元素，并在該元素的src屬性中，設(shè)置圖片的url以獲取圖片的資源來展示。如下：
<img src="http://www.example.com/pictures/1.png">
這種形式的圖片顯示，將會在html上的該位置，以圖片的原尺寸直接顯示圖片。假如圖片像素是300x200，那么就會以300x200的像素顯示出來。
有時，我們會將圖片放到另一個html元素內(nèi)部來顯示。假如這個元素是一個height x width = 200 x 100 的<div>，那么圖片就會只能展示左上角的200 x 100像素的部分了。為了解決這種尷尬情況，可以手動指定圖片的高度和寬度，以縮略圖的方式全部展示。如下:
<img height="200px" width="100px" src="http://www.example.com/pictures/1.png">
這樣做索然可以讓圖片全部顯示，但是新的問題產(chǎn)生了，圖片發(fā)生了扭曲。事實上，原尺寸的高度和寬度的比例是300/200 = 3/2，手動設(shè)定為200/100之后，就變成了2/1，就會讓圖片發(fā)生上下拉伸的現(xiàn)象。如果比例比3/2小，又會出現(xiàn)左右拉伸的現(xiàn)象。為了解決這個問題，我們的圖片的縮放，就只能按照原來尺寸的比例來進(jìn)行?？梢詫eight或width設(shè)置百分比屬性，來繼承底層html元素的尺寸。如下：
<img width="100%" src="http://www.example.com/pictures/1.png">
這樣一來，圖片的寬度就變成了100px，其高度會按照原比例進(jìn)行縮放，變成150px。
另外，我們還可以將圖片設(shè)置成元素的背景圖像，并調(diào)整圖片的透明度。
圖片的加載
老版本的瀏覽器，圖片只能通過其src屬性從服務(wù)器上加載?；趆tml5規(guī)范的新版瀏覽器，新增支持從瀏覽器本地客戶端上加載圖片(和文件)。利用這個新特性，我們上傳和顯示圖片，再也不需要先上傳到服務(wù)器了，直接在本地加載到瀏覽器上顯示和處理，然后再上傳到服務(wù)器，這樣可以更加節(jié)約帶寬，提升用戶體驗。
這是一個本地加載圖片的demo：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="">
<input type="file" id="picture">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript">
$('#picture').change(function () {
var pictureFile = this.files[0];
var url = window.URL.createObjectURL(pictureFile);
$('#image').attr('src', url);
});
</script>
</body>
</html>
圖片的處理
直接從圖片文件中獲取的圖片，不一定在尺寸和顯示內(nèi)容上讓我們滿意，有時候，我們需要先處理這些圖片，再上傳到服務(wù)器上。
當(dāng)然，我們可以在本地打開類似Photoshop這樣的圖片處理軟件來處理好圖片之后，再執(zhí)行上傳操作，但是這樣就費時費力，用戶體驗不佳了。在只需要簡單裁剪、旋轉(zhuǎn)和縮放處理的情況下，我們可以直接在瀏覽器上完成。這時候，可以依賴一些js插件來輔助處理圖片。比如我們要介紹的cropper。
使用cropper插件，我們可以輕松完成圖片的裁剪、旋轉(zhuǎn)和縮放處理。如果需要更多的處理，則建議用專業(yè)圖像工具來處理了。
使用cropper處理完的圖片，我們可以通過其getCroppedCanvas方法來獲取裁剪后的canvas對象。
處理后圖片的展示
我們獲得裁剪圖片的canvas對象后，利用canvas對象的toBlob方法來獲取裁剪圖片的blob對象以及進(jìn)行相應(yīng)處理的回調(diào)函數(shù)。blob對象是File對象的基礎(chǔ)對象，所以，我們使用這個對象，也可以顯示成圖片。代碼片段如下：
$('#cropper-img').cropper('getCroppedCanvas', {
width: 400,
height: 400,
minWidth: 256,
minHeight: 256,
maxWidth: 4096,
maxHeight: 4096,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high'
}).toBlob(function(blob) {
var croppedUrl = window.URL.createObjectURL(blob);
$('#image').attr('src', croppedUrl);
});
處理后圖片的上傳
我們處理圖片的最終目的還是為了上傳到服務(wù)器。所以當(dāng)我們看了裁剪圖片令人滿意之后，就可以著手上傳圖片了。
首先，我們可以將blob對象創(chuàng)建為File對象，然后用ajax方法上傳這個File對象到服務(wù)器上。修改后代碼片段如下：
toBlob(function(blob) {
var croppedUrl = window.URL.createObjectURL(blob);
$('#image').attr('src', croppedUrl);
var formData = new FormData();
var pictureFile = new File([blob], $('#picture').val());
formData.append('picture', pictureFile);
$.ajax("path/to/upload-picture", {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
alert("Upload error");
}
});
});
Demo
可以參照cropper的demo體驗截圖操作，以及其案例的源碼。
本文示例源碼地址
參考文章
利用html5 file api讀取本地文件（如圖片、PDF等）
cropper README
無戒365挑戰(zhàn)營 第十篇
