日本xxxx18视频在线观看-日本xxxx1819-日本xxxwww在线观看-日本xxx-日本xx-日本www在线视频

前言

公司的移動端業(yè)務需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務器，這樣可以減少移動端上行流量，減少用戶上傳等待時長，優(yōu)化用戶體驗。

插播一下，本文案例已整理成插件，已上傳npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從github 下載。

所以本文將試圖解決如下問題：

• 弄清 Image 對象、data URL、Canvas 和 File（Blob）之間的轉(zhuǎn)化關(guān)系；

• 圖片壓縮關(guān)鍵技巧；

• 超大圖片壓縮黑屏問題。

轉(zhuǎn)化關(guān)系

在實際應用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對象，上傳到遠程圖片服務器；不妨有時候我們也需要將一個 base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對象。一般的，它們有如下轉(zhuǎn)化關(guān)系：

具體實現(xiàn)

下面將按照轉(zhuǎn)化關(guān)系圖中的轉(zhuǎn)化方法一一實現(xiàn)。

file2DataUrl(file, callback)

用戶通過頁面標簽 <input type="file" /> 上傳的本地圖片直接轉(zhuǎn)化date URL字符串形式?？梢允褂肍ileReader 文件讀取構(gòu)造函數(shù)。FileReader 對象允許 Web 應用程序異步讀取存儲在計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用File或Blob 對象指定要讀取的文件或數(shù)據(jù)。該實例方法 readAsDataURL 讀取文件內(nèi)容并轉(zhuǎn)化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內(nèi)容。

Data URL 由四個部分組成：前綴（data:）、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64 標記、數(shù)據(jù)本身：

比如一張 png 格式圖片，轉(zhuǎn)化為 base64 字符串形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。

file2Image(file, callback)

若想將用戶通過本地上傳的圖片放入緩存并 img 標簽顯示出來，除了可以利用以上方法轉(zhuǎn)化成的 base64 字符串作為圖片 src，還可以直接用 URL 對象，引用保存在 File 和 Blob 中數(shù)據(jù)的 URL。使用對象 URL 的好處是可以不必把文件內(nèi)容讀取到 Javascript 中 而直接使用文件內(nèi)容。為此，只要在需要文件內(nèi)容的地方提供對象 URL 即可。

注意：要創(chuàng)建對象 URL，可以使用 window.URL.createObjectURL() 方法，并傳入 File 或 Blob 對象。如果不再需要相應數(shù)據(jù)，最好釋放它占用的內(nèi)容。但只要有代碼在引用對象 URL，內(nèi)存就不會釋放。要手工釋放內(nèi)存，可以把對象 URL 傳給 URL.revokeObjectURL()。

url2Image(url, callback)

通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調(diào)函數(shù) callback 回傳獲取到的 Image 對象。

image2Canvas(image)

利用drawlmage() 方法將 Image 對象繪畫在 Canvas 對象上。

drawImage 有三種語法形式：

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

參數(shù)：

image 繪制到上下文的元素；

sx 繪制選擇框左上角以 Image 為基準 X 軸坐標；

sy 繪制選擇框左上角以 Image 為基準 Y 軸坐標；

sWidth 繪制選擇框?qū)挾龋?/p>

sHeight 繪制選擇框?qū)挾龋?/p>

dx Image 的左上角在目標 canvas 上 X 軸坐標；

dy Image 的左上角在目標 canvas 上 Y 軸坐標；

dWidth Image 在目標 canvas 上繪制的寬度；

dHeight Image 在目標 canvas 上繪制的高度；

?

canvas2DataUrl(canvas, quality, type)

HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的data URL 。同時可以指定輸出格式和質(zhì)量。

參數(shù)分別為：

type 圖片格式，默認為 image/png。

encoderOptions在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認值 0.92，其他參數(shù)會被忽略。

dataUrl2Image(dataUrl, callback)

圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。

dataUrl2Blob(dataUrl, type)

將 data URL 字符串轉(zhuǎn)化為 Blob 對象。主要思路是：先將 data URL 數(shù)據(jù)（data） 部分提取出來，用 atob 對經(jīng)過 base64 編碼的字符串進行解碼，再轉(zhuǎn)化成 Unicode 編碼，存儲在Uint8Array（8位無符號整型數(shù)組，每個元素是一個字節(jié)） 類型數(shù)組，最終轉(zhuǎn)化成 Blob 對象。

canvas2Blob(canvas, callback, quality, type)

HTMLCanvasElement 有toBlob(callback, [type], [encoderOptions])方法創(chuàng)造 Blob 對象，用以展示 canvas 上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個參數(shù)指定圖片格式，如不特別指明，圖片的類型默認為 image/png，分辨率為 96dpi。第三個參數(shù)用于針對image/jpeg 格式的圖片進行輸出圖片的質(zhì)量設置。

為兼容低版本瀏覽器，作為 toBlob 的 polyfill 方案，可以用上面 data URL 生成 Blob 方法 dataUrl2Blob 作為HTMLCanvasElement 原型方法。

blob2DataUrl(blob, callback)

將 Blob 對象轉(zhuǎn)化成 data URL 數(shù)據(jù)，由于 FileReader 的實例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數(shù)據(jù)，這里復用上面 file2DataUrl 方法即可：

blob2Image(blob, callback)

將 Blob 對象轉(zhuǎn)化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復用上面 file2Image 方法即可：

upload(url, file, callback)

上傳圖片（已壓縮），可以使用 FormData 傳入文件對象，通過 XHR 直接把文件上傳到服務器。

也可以使用 FileReader 讀取文件內(nèi)容，轉(zhuǎn)化成二進制上傳

實現(xiàn)簡易圖片壓縮

在熟悉以上各種圖片轉(zhuǎn)化方法的具體實現(xiàn)，將它們封裝在一個公用對象 util 里，再結(jié)合壓縮轉(zhuǎn)化流程圖，這里我們可以簡單實現(xiàn)圖片壓縮了：

首先將上傳圖片轉(zhuǎn)化成 Image 對象，再將寫入到 Canvas 畫布，最后由 Canvas 對象 API 對圖片的大小和尺寸輸出調(diào)整，實現(xiàn)壓縮目的。

這個簡易圖片壓縮方法調(diào)用和入?yún)ⅲ?/p>

如果看到這里的客官不嫌棄這個 demo 太簡單可以戳這里試試水。如果你有足夠的耐心多傳幾種類型圖片就會發(fā)現(xiàn)還存在如下問題：

壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；

png 格式圖片同格式壓縮，壓縮率不高，還有可能出現(xiàn)“不減反增”現(xiàn)象；

有些情況，其他格式轉(zhuǎn)化成 png 格式也會出現(xiàn)“不減反增”現(xiàn)象；

大尺寸 png 格式圖片在一些手機上，壓縮后出現(xiàn)“黑屏”現(xiàn)象；

改進版圖片壓縮

俗話說“羅馬不是一天建成的”，通過上述實驗，我們發(fā)現(xiàn)了很多不足，下面將逐條問題分析，尋求解決方案。

壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；

為了避免壓縮圖片變形，一般采用等比縮放，首先要計算出原始圖片寬高比 aspectRatio，用戶設置的高乘以 aspectRatio，得出等比縮放后的寬，若比用戶設置寬的小，則用戶設置的高為為基準縮放，否則以寬為基準縮放。

輸出圖片的尺寸確定了，接下來就是按這個尺寸創(chuàng)建一個 Canvas 畫布，將圖片畫上去。這里可以將上面提到的 image2Canvas 方法稍微做一下改造：

png 格式圖片同格式壓縮，壓縮率不高，還有可能出現(xiàn)“不減反增”現(xiàn)象

一般的，不建議將 png 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時反而會造成自身質(zhì)量變得更大。

因為我們在“具體實現(xiàn)”中兩個有關(guān)壓縮關(guān)鍵 API：

toBlob(callback, [type], [encoderOptions]) 參數(shù) encoderOptions 用于針對image/jpeg 格式的圖片進行輸出圖片的質(zhì)量設置；

toDataURL(type, encoderOptions 參數(shù)encoderOptions 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

均未對 png 格式圖片有壓縮效果。

有個折衷的方案，我們可以設置一個閾值，如果 png 圖片的質(zhì)量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結(jié)果不至于質(zhì)量太大，在此基礎上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當圖片質(zhì)量大于某個值時，我們壓縮成 jpeg 格式。

// `png` 格式圖片大小超過 `convertSize`, 轉(zhuǎn)化成 `jpeg` 格式
if (file.size > options.convertSize && options.mimeType === 'image/png') {
  options.mimeType = 'image/jpeg';
}
// 省略一些代碼
// ...
// 用戶期待的輸出寬高沒有大于源圖片的寬高情況下，輸出文件大小大于源文件，返回源文件
if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  result = file;
}

大尺寸 png 格式圖片在一些手機上，壓縮后出現(xiàn)“黑屏”現(xiàn)象；

由于各大瀏覽器對Canvas最大尺寸支持不同

如果圖片尺寸過大，在創(chuàng)建同尺寸畫布，再畫上圖片，就會出現(xiàn)異常情況，即生成的畫布沒有圖片像素，而畫布本身默認給的背景色為黑色，這樣就導致圖片“黑屏”情況。

這里可以通過控制輸出圖片最大寬高防止生成畫布越界，并且用透明色覆蓋默認黑色背景解決解決“黑屏”問題：

// ...
// 限制最小和最大寬高
var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || Infinity;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;
 
if (maxWidth < Infinity && maxHeight < Infinity) {
 if (maxHeight * aspectRatio > maxWidth) {
    maxHeight = maxWidth / aspectRatio;
  } else {
    maxWidth = maxHeight * aspectRatio;
  }
} else if (maxWidth < Infinity) {
  maxHeight = maxWidth / aspectRatio;
} else if (maxHeight < Infinity) {
  maxWidth = maxHeight * aspectRatio;
}
 
if (minWidth > 0 && minHeight > 0) {
 if (minHeight * aspectRatio > minWidth) {
    minHeight = minWidth / aspectRatio;
  } else {
    minWidth = minHeight * aspectRatio;
  }
} else if (minWidth > 0) {
  minHeight = minWidth / aspectRatio;
} else if (minHeight > 0) {
  minWidth = minHeight * aspectRatio;
}
 
width = Math.floor(Math.min(Math.max(width, minWidth), maxWidth));
height = Math.floor(Math.min(Math.max(height, minHeight), maxHeight));
 
// ...
// 覆蓋默認填充顏色 (#000)
var fillStyle = 'transparent';
context.fillStyle = fillStyle;

到這里，上述的意外問題被我們一一解決了。

總結(jié)

我們梳理了通過頁面標簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實際使用中還存在的一些意外情況，提供了相應的解決方案。將改進版圖片壓縮整理成插件，已上傳npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從github 下載。