如何修改尺寸大小，附下載鏈接

談?wù)搱D片處理軟件時，我們常常會提到行業(yè)領(lǐng)袖和強大的工具，但選擇合適的軟件不僅僅是使用功能，更是關(guān)于學習和成長。Adobe Photoshop、GIMP、Krita等軟件不僅提供強大的編輯功能，還能成為您探索和提升技能的平臺。無論您是剛?cè)腴T的新手還是經(jīng)驗豐富的專業(yè)人士，理解如何有效地使用這些工具至關(guān)重要。通過學習它們的基礎(chǔ)和高級功能，您將能夠更好地應(yīng)對各種挑戰(zhàn)，創(chuàng)造出令人印象深刻的作品。讓我們一起探索和學習，用這些工具來提升我們的創(chuàng)造力和技能吧！看到粉絲當眾求助，讓寫一個關(guān)于圖片如何修改尺寸的文章，本著授人以魚不如授人以漁的原則，列舉出并簡單寫了一下圖片調(diào)整尺寸的方法。

在這個視覺為王的時代，擁有一款得心應(yīng)手的圖片處理軟件至關(guān)重要。無論您是攝影愛好者、設(shè)計師，還是僅僅想要美化日常照片，以下這 10 款軟件都能滿足您的需求。

1. Adobe Photoshop

官網(wǎng)下載：https://www.adobe.com/cn/

2. Adobe Illustrator

官網(wǎng)下載：https://www.adobe.com/cn/products/illustrator.html

3. GIMP

官網(wǎng)下載：https://www.gimp.org/

4. 美圖秀秀

官網(wǎng)下載：https://pc.meitu.com/download

5. 光影魔術(shù)手

官網(wǎng)下載：https://www.neoimaging.cn/

8. 改圖鴨

官網(wǎng)下載：https://www.gaituya.com/

9. 圖片編輯助手

官網(wǎng)下載：https://www.xunjiepdf.com/tupian

10. Fotor

官網(wǎng)下載：http://static.fotor.com.s3-website-us-east-1.amazonaws.com/cn/index.html

以下是使用一些常見軟件調(diào)整圖片尺寸的步驟：

**方法一：使用嗨格式摳圖大師** 1. 下載并安裝嗨格式摳圖大師，打開軟件后點擊對應(yīng)摳圖功能。 2. 在彈出的窗口中，點擊選擇需要調(diào)整尺寸的圖片。 3. 圖片添加完成后，點擊右邊“改尺寸”選擇需要的尺寸即可調(diào)整圖片大小。小貼士：嗨格式摳圖大師還支持批量處理圖片，可以一次性調(diào)整多張圖片大小，大大提高工作效率。

**方法二：使用 Photoshop** 1. 打開 Photoshop，導入需要調(diào)整尺寸的圖片。 2. 在菜單欄中選擇“圖像”，然后選擇“圖像大小”。 3. 在彈出的對話框中，可以修改圖片的寬度和高度。注意，需確保“約束比例”是勾選狀態(tài)，以保持圖片的長寬比不變，避免圖片變形。若想要自定義長寬比，也可以取消勾選“約束比例”。 4. 修改完成后，點擊“確定”按鈕即可保存調(diào)整大小后的圖片。

**方法三：使用畫圖工具（Windows 系統(tǒng)自帶）** 1. 右擊圖片，選擇“打開方式”中的“畫圖”。 2. 在畫圖工具的菜單欄中，找到“重新調(diào)整大小”選項，點擊它。 3. 在彈出的對話框中，選擇依據(jù)百分比或像素來調(diào)整圖片大小。若選擇像素，則可手動輸入新的水平和垂直像素值。勾選“保持縱橫比”可使圖片在調(diào)整大小時保持比例不變，防止圖片變形。 4. 點擊“確定”后，再點擊“文件”菜單，選擇“保存”，將調(diào)整后的圖片保存到本地。

**方法四：使用美圖秀秀** 1. 打開美圖秀秀，導入需要調(diào)整尺寸的照片。 2. 在菜單欄中選擇“裁剪”功能。 3. 在彈出的對話框中選擇“自定義裁剪”。 4. 輸入需要調(diào)整的尺寸大小（如 285*385），并點擊“確定”按鈕。 5. 等待調(diào)整完成后，保存照片即可。

**方法五：使用在線圖片處理工具改圖寶** 1. 打開改圖寶的官網(wǎng)（https://www.gaitubao.com/ ）。 2. 點擊“選擇圖片”或直接拖放需要調(diào)整尺寸的圖片到指定區(qū)域。 3. 在下方的“目標圖像素”處輸入想要的圖片尺寸（寬度×高度）。 4. 系統(tǒng)會自動調(diào)整圖片尺寸，調(diào)整完成后，可點擊“下載”按鈕保存圖片。需注意，不同軟件的操作界面和具體選項可能會有所差異，但基本思路都是找到調(diào)整圖片尺寸的相關(guān)功能，并輸入期望的尺寸數(shù)值或通過其他方式進行設(shè)置。此外，在調(diào)整圖片尺寸時，為了保持圖片的質(zhì)量和清晰度，盡量避免過度拉伸或壓縮圖片。如果需要處理的圖片數(shù)量較多，可以優(yōu)先考慮支持批量處理的軟件，以提高工作效率。

網(wǎng)盤鏈接：夸克網(wǎng)盤分享

提取碼：pdUF

以上是對每款軟件如何調(diào)整圖片尺寸大小的簡要介紹。具體操作可能會因軟件版本或用戶界面的不同而有所差異，建議在使用時參考軟件的官方文檔或在線幫助以獲取最準確的操作方法。好了，今天就聊到這兒，如果大家在生活中需要用什么軟件或者使用方法，歡迎留言。

*CSS基礎(chǔ)-06-元素大小（設(shè)置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、設(shè)置行間距 line-height）**

在Web前端開發(fā)中，對元素大小的精確控制是構(gòu)建美觀且布局合理的網(wǎng)頁界面的關(guān)鍵。CSS提供了豐富的屬性來幫助我們實現(xiàn)這一目標，包括設(shè)置元素的寬高（`height`/`width`）、定義最大與最小尺寸（`max-height`/`max-width`和`min-height`/`min-width`），以及調(diào)整文本行間距（`line-height`）。本文將深入探討這些屬性的用法、應(yīng)用場景及示例代碼，助您掌握元素大小調(diào)整的核心技巧。

**一、設(shè)置元素尺寸：height與width**

**1.1 定義元素高度（height）**

**定義方式：**

```css

element {

height: value;

}

```

其中，`element`代表目標元素的選擇器，`value`可以是以下幾種類型：

- **絕對單位**：如像素（`px`）、厘米（`cm`）、毫米（`mm`）、英寸（`in`）、點（`pt`）等。

- **相對單位**：如百分比（`%`）、視口寬度（`vw`）、視口高度（`vh`）、字體大?。╜em`）等。

- **關(guān)鍵字**：如`auto`（默認值，由內(nèi)容決定高度）、`initial`（恢復(fù)初始值）、`inherit`（繼承父元素的值）。

**示例代碼：**

```html

<p>這是一個高度為200px的盒子。</p>

</div>

<style>

.box {

background-color: #f8f9fa;

height: 200px; /* 設(shè)置固定高度 */

width: 300px; /* 設(shè)置固定寬度，便于觀察效果 */

}

</style>

```

**1.2 定義元素寬度（width）**

**定義方式：**

```css

element {

width: value;

}

```

`width`屬性的值同樣支持絕對單位、相對單位及關(guān)鍵字，其使用方法和`height`相同。

**示例代碼：**

```html

<p>這是一個寬度為80%的自適應(yīng)容器。</p>

</div>

<style>

.content {

background-color: #f8f9fa;

width: 80%; /* 設(shè)置寬度為父元素的80% */

margin: 0 auto; /* 居中顯示 */

}

</style>

```

**二、設(shè)定元素最大/最小尺寸：max-height/max-width與min-height/min-width**

**2.1 最大高度/寬度（max-height/max-width）**

**定義方式：**

```css

element {

max-height: value;

max-width: value;

}

```

這兩個屬性用于限制元素的最大尺寸，當元素的實際尺寸超過設(shè)定值時，會自動調(diào)整到指定的最大值。值的類型與`height`和`width`相同。

**示例代碼：**

```html

</div>

<style>

.image-container {

max-width: 100%; /* 圖片最大寬度不超過父元素寬度 */

max-height: 500px; /* 圖片最大高度不超過500px */

overflow: hidden; /* 隱藏超出部分 */

}

</style>

```

**2.2 最小高度/寬度（min-height/min-width）**

**定義方式：**

```css

element {

min-height: value;

min-width: value;

}

```

`min-height`和`min-width`用于確保元素的最小尺寸，當元素的實際尺寸小于設(shè)定值時，會強制擴展到指定的最小值。值的類型與`height`和`width`相同。

**示例代碼：**

```html

<ul>

</ul>

</div>

<style>

.sidebar {

background-color: #f8f9fa;

min-width: 200px; /* 側(cè)邊欄最小寬度為200px */

}

</style>

```

**三、設(shè)置行間距：line-height**

**3.1 定義行間距（line-height）**

**定義方式：**

```css

element {

line-height: value;

}

```

`line-height`屬性用于設(shè)置元素內(nèi)文本行之間的垂直間距。值的類型包括：

- **數(shù)值**：如`1.5`、`2`等，表示相對于當前字體大小的倍數(shù)。

- **絕對單位**：如像素（`px`）、厘米（`cm`）等。

- **百分比**：相對于元素本身的字體大小。

- **關(guān)鍵字**：如`normal`（默認值，瀏覽器默認行間距）、`initial`、`inherit`。

**示例代碼：**

```html

<p class="loose-text">這是一段行間距為1.5倍的文本。</p>

<style>

.loose-text {

font-size: 16px;

line-height: 1.5; /* 設(shè)置行間距為字體大小的1.5倍 */

}

</style>

```

**四、實戰(zhàn)應(yīng)用與注意事項**

**4.1 響應(yīng)式設(shè)計**

結(jié)合`max-height`/`max-width`、`min-height`/`min-width`與媒體查詢（`@media`），可以輕松實現(xiàn)響應(yīng)式布局，確保元素在不同屏幕尺寸下保持合適的大小。

**示例代碼：**

```css

@media (max-width: 768px) {

.content {

width: 100%; /* 小于768px時，寬度占滿屏幕 */

}

@media (min-width: 768px) and (max-width: 1200px) {

.content {

width: 75%; /* 768px至1200px之間，寬度為75% */

}

@media (min-width: 1200px) {

.content {

width: 50%; /* 大于1200px時，寬度為50% */

}

```

**4.2 注意事項**

- **`height`與`width`設(shè)置為`auto`時，元素的尺寸通常由其內(nèi)容決定。對于塊級元素，寬度默認為`auto`，高度則受內(nèi)部內(nèi)容影響；對于內(nèi)聯(lián)元素，寬度和高度均受內(nèi)容影響。**

- **使用百分比單位時，`height`的百分比基于包含塊的高度，而`width`的百分比基于包含塊的寬度。**

- **在設(shè)置`min-height`時，確保包含塊（父元素）具有足夠的高度或自身元素具有足夠的內(nèi)容，否則可能無法達到預(yù)期效果。**

- **使用`line-height`時，注意與其他文本相關(guān)的屬性（如`font-size`、`vertical-align`等）的配合，以保持良好的排版效果。**

通過熟練掌握上述CSS屬性，您將能精準地控制網(wǎng)頁中元素的大小，實現(xiàn)復(fù)雜多樣的布局效果。不斷實踐并結(jié)合實際項目需求，您的前端開發(fā)技能將更上一層樓。

者：wuwhs

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023486410

前言

公司的移動端業(yè)務(wù)需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務(wù)器，這樣可以減少移動端上行流量，減少用戶上傳等待時長，優(yōu)化用戶體驗。前段時間小編也發(fā)布一篇關(guān)于《JS 圖片簡易壓縮【實踐】》，有興趣的小伙伴也可以看看。

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

github：https://github.com/wuwhs/js-image-compressor

JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型眾多，有些手機壓縮圖片甚至變黑。

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

弄清 Image 對象、data URL、Canvas 和 File（Blob）之間的轉(zhuǎn)化關(guān)系；
圖片壓縮關(guān)鍵技巧；
超大圖片壓縮黑屏問題。

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

在實際應(yīng)用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob）對象，上傳到遠程圖片服務(wù)器；不妨有時候我們也需要將一個 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)化 data URL 字符串形式?？梢允褂?FileReader 文件讀取構(gòu)造函數(shù)。FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲在計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。該實例方法 readAsDataURL 讀取文件內(nèi)容并轉(zhuǎn)化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內(nèi)容。

function file2DataUrl(file, callback) {
  var reader=new FileReader();
  reader.onload=function () {
    callback(reader.result);
  };
  reader.readAsDataURL(file);
}

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

data:<mediatype>,<data>

比如一張 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 即可。

function file2Image(file, callback) {
  var image=new Image();
  var URL=window.webkitURL || window.URL;
  if (URL) {
    var url=URL.createObjectURL(file);
    image.onload=function() {
      callback(image);
      window.revokeObjectURL(url);
    };
    image.src=url;
  } else {
    inputFile2DataUrl(file, function(dataUrl) {
      image.onload=function() {
        callback(image);
      }
      image.src=dataUrl;
    });
  }
}

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

url2Image(url, callback)

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

function url2Image(url, callback) {
  var image=new Image();
  image.src=url;
  image.onload=function() {
    callback(image);
  }
}

image2Canvas(image)

利用 drawImage() 方法將 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ū)挾龋?/li>
sHeight 繪制選擇框?qū)挾龋?/li>
dx Image 的左上角在目標 canvas 上 X 軸坐標；
dy Image 的左上角在目標 canvas 上 Y 軸坐標；
dWidth Image 在目標 canvas 上繪制的寬度；
dHeight Image 在目標 canvas 上繪制的高度；

function image2Canvas(image) {
  var canvas=document.createElement('canvas');
  var ctx=canvas.getContext('2d');
  canvas.width=image.naturalWidth;
  canvas.height=image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  return 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ù)會被忽略。

function canvas2DataUrl(canvas, quality, type) {
  return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}

dataUrl2Image(dataUrl, callback)

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

function dataUrl2Image(dataUrl, callback) {
  var image=new Image();
  image.onload=function() {
    callback(image);
  };
  image.src=dataUrl;
}

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 對象。

function dataUrl2Blob(dataUrl, type) {
  var data=dataUrl.split(',')[1];
  var mimePattern=/^data:(.*?)(;base64)?,/;
  var mime=dataUrl.match(mimePattern)[1];
  var binStr=atob(data);
  var arr=new Uint8Array(len);

  for (var i=0; i < len; i++) {
    arr[i]=binStr.charCodeAt(i);
  }
  return new Blob([arr], {type: type || mime});
}

canvas2Blob(canvas, callback, quality, type)

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

function canvas2Blob(canvas, callback, quality, type){
  canvas.toBlob(function(blob) {
    callback(blob);
  }, type || 'image/jpeg', quality || 0.8);
}

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

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {
    let dataUrl=this.toDataURL(type, quality);
    callback(dataUrl2Blob(dataUrl));
  }
 });
}

blob2DataUrl(blob, callback)

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

function blob2DataUrl(blob, callback) {
  file2DataUrl(blob, callback);
}

blob2Image(blob, callback)

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

function blob2Image(blob, callback) {
  file2Image(blob, callback);
}

upload(url, file, callback)

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

function upload(url, file, callback) {
  var xhr=new XMLHttpRequest();
  var fd=new FormData();
  fd.append('file', file);
  xhr.onreadystatechange=function () {
    if (xhr.readyState===4 && xhr.status===200) {
      // 上傳成功
      callback && callback(xhr.responseText);
    } else {
      throw new Error(xhr);
    }
  }
  xhr.open('POST', url, true);
  xhr.send(fd);
}

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

function upload(url, file) {
  var reader=new FileReader();
  var xhr=new XMLHttpRequest();

  xhr.open('POST', url, true);
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

  reader.onload=function() {
    xhr.send(reader.result);
  };
  reader.readAsBinaryString(file);
}

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

在熟悉以上各種圖片轉(zhuǎn)化方法的具體實現(xiàn)，將它們封裝在一個公用對象 util 里，再結(jié)合壓縮轉(zhuǎn)化流程圖，這里我們可以簡單實現(xiàn)圖片壓縮了：首先將上傳圖片轉(zhuǎn)化成 Image 對象，再將寫入到 Canvas 畫布，最后由 Canvas 對象 API 對圖片的大小和尺寸輸出調(diào)整，實現(xiàn)壓縮目的。

/**
 * 簡易圖片壓縮方法
 * @param {Object} options 相關(guān)參數(shù)
 */
(function (win) {
  var REGEXP_IMAGE_TYPE=/^image\//;
  var util={};
  var defaultOptions={
    file: null,
    quality: 0.8
  };
  var isFunc=function (fn) { return typeof fn==='function'; };
  var isImageType=function (value) { return REGEXP_IMAGE_TYPE.test(value); };

  /**
   * 簡易圖片壓縮構(gòu)造函數(shù)
   * @param {Object} options 相關(guān)參數(shù)
   */
  function SimpleImageCompressor(options) {
    options=Object.assign({}, defaultOptions, options);
    this.options=options;
    this.file=options.file;
    this.init();
  }

  var _proto=SimpleImageCompressor.prototype;
  win.SimpleImageCompressor=SimpleImageCompressor;

  /**
   * 初始化
   */
  _proto.init=function init() {
    var _this=this;
    var file=this.file;
    var options=this.options;

    if (!file || !isImageType(file.type)) {
      console.error('請上傳圖片文件!');
      return;
    }

    if (!isImageType(options.mimeType)) {
      options.mimeType=file.type;
    }

    util.file2Image(file, function (img) {
      var canvas=util.image2Canvas(img);
      file.width=img.naturalWidth;
      file.height=img.naturalHeight;
      _this.beforeCompress(file, canvas);

      util.canvas2Blob(canvas, function (blob) {
        blob.width=canvas.width;
        blob.height=canvas.height;
        options.success && options.success(blob);
      }, options.quality, options.mimeType)
    })
  }

  /**
   * 壓縮之前，讀取圖片之后鉤子函數(shù)
   */
  _proto.beforeCompress=function beforeCompress() {
    if (isFunc(this.options.beforeCompress)) {
      this.options.beforeCompress(this.file);
    }
  }

  // 省略 `util` 公用方法定義
  // ...

  // 將 `util` 公用方法添加到實例的靜態(tài)屬性上
  for (key in util) {
    if (util.hasOwnProperty(key)) {
      SimpleImageCompressor[key]=util[key];
    }
  }
})(window)

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

var fileEle=document.getElementById('file');

fileEle.addEventListener('change', function () {
  file=this.files[0];

  var options={
    file: file,
    quality: 0.6,
    mimeType: 'image/jpeg',
    // 壓縮前回調(diào)
    beforeCompress: function (result) {
      console.log('壓縮之前圖片尺寸大小: ', result.size);
      console.log('mime 類型: ', result.type);
      // 將上傳圖片在頁面預(yù)覽
      // SimpleImageCompressor.file2DataUrl(result, function (url) {
      //   document.getElementById('origin').src=url;
      // })
    },
    // 壓縮成功回調(diào)
    success: function (result) {
      console.log('壓縮之后圖片尺寸大小: ', result.size);
      console.log('mime 類型: ', result.type);
      console.log('壓縮率： ', (result.size / file.size * 100).toFixed(2) + '%');

      // 生成壓縮后圖片在頁面展示
      // SimpleImageCompressor.file2DataUrl(result, function (url) {
      //   document.getElementById('output').src=url;
      // })

      // 上傳到遠程服務(wù)器
      // SimpleImageCompressor.upload('/upload.png', result);
    }
  };

  new SimpleImageCompressor(options);
}, false);

如果看到這里的客官不嫌棄這個 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，用戶設(shè)置的高層以 aspectRatio，得出等比縮放后的寬，若比用戶設(shè)置寬的小，則用戶設(shè)置的高為為基準縮放，否則以寬為基準縮放。

var aspectRatio=naturalWidth / naturalHeight;
var width=Math.max(options.width, 0) || naturalWidth;
var height=Math.max(options.height, 0) || naturalHeight;
if (height * aspectRatio > width) {
  height=width / aspectRatio;
} else {
  width=height * aspectRatio;
}

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

function image2Canvas(image, destWidth, destHeight) {
  var canvas=document.createElement('canvas');
  var ctx=canvas.getContext('2d');
  canvas.width=destWidth || image.naturalWidth;
  canvas.height=destHeight || image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  return canvas;
}

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

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

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

toBlob(callback, [type], [encoderOptions]) 參數(shù) encoderOptions 用于針對image/jpeg 格式的圖片進行輸出圖片的質(zhì)量設(shè)置；
toDataURL(type, encoderOptions 參數(shù)encoderOptions 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

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

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

到這里，上述的意外問題被我們一一解決了，如需體驗改進版的圖片壓縮 demo 的小伙伴可以戳這里

總結(jié)

我們梳理了通過頁面標簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實際使用中還存在的一些意外情況，提供了相應(yīng)的解決方案。將改進版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用。整理匆忙，如有問題歡迎大家指正，完～

作者：wuwhs

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023486410

在線咨詢

上一篇：智慧樹自動關(guān)閉彈窗，自動跳轉(zhuǎn)下一節(jié)，自動刷課教程代碼
下一篇：Web前端JavaScript面向?qū)ο箝]包實現(xiàn)封裝小

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何修改尺寸大小，附下載鏈接

前言

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

具體實現(xiàn)

file2DataUrl(file, callback)

file2Image(file, callback)

url2Image(url, callback)

image2Canvas(image)

canvas2DataUrl(canvas, quality, type)

dataUrl2Image(dataUrl, callback)

dataUrl2Blob(dataUrl, type)

canvas2Blob(canvas, callback, quality, type)

blob2DataUrl(blob, callback)

blob2Image(blob, callback)

upload(url, file, callback)

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

改進版圖片壓縮

總結(jié)

您的項目需求

如何修改尺寸大小，附下載鏈接