整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
談論圖片處理軟件時，我們常常會提到行業領袖和強大的工具，但選擇合適的軟件不僅僅是使用功能，更是關于學習和成長。Adobe Photoshop、GIMP、Krita等軟件不僅提供強大的編輯功能，還能成為您探索和提升技能的平臺。無論您是剛入門的新手還是經驗豐富的專業人士，理解如何有效地使用這些工具至關重要。通過學習它們的基礎和高級功能，您將能夠更好地應對各種挑戰，創造出令人印象深刻的作品。讓我們一起探索和學習，用這些工具來提升我們的創造力和技能吧！看到粉絲當眾求助，讓寫一個關于圖片如何修改尺寸的文章，本著授人以魚不如授人以漁的原則，列舉出并簡單寫了一下圖片調整尺寸的方法。
在這個視覺為王的時代，擁有一款得心應手的圖片處理軟件至關重要。無論您是攝影愛好者、設計師，還是僅僅想要美化日常照片，以下這 10 款軟件都能滿足您的需求。
1. Adobe Photoshop
官網下載：https://www.adobe.com/cn/
2. Adobe Illustrator
官網下載：https://www.adobe.com/cn/products/illustrator.html
3. GIMP
官網下載：https://www.gimp.org/
4. 美圖秀秀
官網下載：https://pc.meitu.com/download
5. 光影魔術手
官網下載：https://www.neoimaging.cn/
8. 改圖鴨
官網下載：https://www.gaituya.com/
9. 圖片編輯助手
官網下載：https://www.xunjiepdf.com/tupian
10. Fotor
官網下載：http://static.fotor.com.s3-website-us-east-1.amazonaws.com/cn/index.html
以下是使用一些常見軟件調整圖片尺寸的步驟：
**方法一：使用嗨格式摳圖大師** 1. 下載并安裝嗨格式摳圖大師，打開軟件后點擊對應摳圖功能。 2. 在彈出的窗口中，點擊選擇需要調整尺寸的圖片。 3. 圖片添加完成后，點擊右邊“改尺寸”選擇需要的尺寸即可調整圖片大小。 小貼士：嗨格式摳圖大師還支持批量處理圖片，可以一次性調整多張圖片大小，大大提高工作效率。
**方法二：使用 Photoshop** 1. 打開 Photoshop，導入需要調整尺寸的圖片。 2. 在菜單欄中選擇“圖像”，然后選擇“圖像大小”。 3. 在彈出的對話框中，可以修改圖片的寬度和高度。注意，需確保“約束比例”是勾選狀態，以保持圖片的長寬比不變，避免圖片變形。若想要自定義長寬比，也可以取消勾選“約束比例”。 4. 修改完成后，點擊“確定”按鈕即可保存調整大小后的圖片。
**方法三：使用畫圖工具（Windows 系統自帶）** 1. 右擊圖片，選擇“打開方式”中的“畫圖”。 2. 在畫圖工具的菜單欄中，找到“重新調整大小”選項，點擊它。 3. 在彈出的對話框中，選擇依據百分比或像素來調整圖片大小。若選擇像素，則可手動輸入新的水平和垂直像素值。勾選“保持縱橫比”可使圖片在調整大小時保持比例不變，防止圖片變形。 4. 點擊“確定”后，再點擊“文件”菜單，選擇“保存”，將調整后的圖片保存到本地。
**方法四：使用美圖秀秀** 1. 打開美圖秀秀，導入需要調整尺寸的照片。 2. 在菜單欄中選擇“裁剪”功能。 3. 在彈出的對話框中選擇“自定義裁剪”。 4. 輸入需要調整的尺寸大小（如 285*385），并點擊“確定”按鈕。 5. 等待調整完成后，保存照片即可。
**方法五：使用在線圖片處理工具改圖寶** 1. 打開改圖寶的官網（https://www.gaitubao.com/ ）。 2. 點擊“選擇圖片”或直接拖放需要調整尺寸的圖片到指定區域。 3. 在下方的“目標圖像素”處輸入想要的圖片尺寸（寬度×高度）。 4. 系統會自動調整圖片尺寸，調整完成后，可點擊“下載”按鈕保存圖片。 需注意，不同軟件的操作界面和具體選項可能會有所差異，但基本思路都是找到調整圖片尺寸的相關功能，并輸入期望的尺寸數值或通過其他方式進行設置。此外，在調整圖片尺寸時，為了保持圖片的質量和清晰度，盡量避免過度拉伸或壓縮圖片。如果需要處理的圖片數量較多，可以優先考慮支持批量處理的軟件，以提高工作效率。
網盤鏈接：夸克網盤分享
提取碼：pdUF
以上是對每款軟件如何調整圖片尺寸大小的簡要介紹。具體操作可能會因軟件版本或用戶界面的不同而有所差異，建議在使用時參考軟件的官方文檔或在線幫助以獲取最準確的操作方法。好了，今天就聊到這兒，如果大家在生活中需要用什么軟件或者使用方法，歡迎留言。
*CSS基礎-06-元素大小（設置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、設置行間距 line-height）**
在Web前端開發中，對元素大小的精確控制是構建美觀且布局合理的網頁界面的關鍵。CSS提供了豐富的屬性來幫助我們實現這一目標，包括設置元素的寬高（`height`/`width`）、定義最大與最小尺寸（`max-height`/`max-width`和`min-height`/`min-width`），以及調整文本行間距（`line-height`）。本文將深入探討這些屬性的用法、應用場景及示例代碼，助您掌握元素大小調整的核心技巧。
**一、設置元素尺寸：height與width**
**1.1 定義元素高度（height）**
**定義方式：**
```css
element {
height: value;
}
```
其中，`element`代表目標元素的選擇器，`value`可以是以下幾種類型：
- **絕對單位**：如像素（`px`）、厘米（`cm`）、毫米（`mm`）、英寸（`in`）、點（`pt`）等。
- **相對單位**：如百分比（`%`）、視口寬度（`vw`）、視口高度（`vh`）、字體大小（`em`）等。
- **關鍵字**：如`auto`（默認值，由內容決定高度）、`initial`（恢復初始值）、`inherit`（繼承父元素的值）。
**示例代碼：**
```html
<div class="box">
<p>這是一個高度為200px的盒子。</p>
</div>
<style>
.box {
background-color: #f8f9fa;
height: 200px; /* 設置固定高度 */
width: 300px; /* 設置固定寬度，便于觀察效果 */
}
</style>
```
**1.2 定義元素寬度（width）**
**定義方式：**
```css
element {
width: value;
}
```
`width`屬性的值同樣支持絕對單位、相對單位及關鍵字，其使用方法和`height`相同。
**示例代碼：**
```html
<div class="content">
<p>這是一個寬度為80%的自適應容器。</p>
</div>
<style>
.content {
background-color: #f8f9fa;
width: 80%; /* 設置寬度為父元素的80% */
margin: 0 auto; /* 居中顯示 */
}
</style>
```
**二、設定元素最大/最小尺寸：max-height/max-width與min-height/min-width**
**2.1 最大高度/寬度（max-height/max-width）**
**定義方式：**
```css
element {
max-height: value;
max-width: value;
}
```
這兩個屬性用于限制元素的最大尺寸，當元素的實際尺寸超過設定值時，會自動調整到指定的最大值。值的類型與`height`和`width`相同。
**示例代碼：**
```html
<div class="image-container">
<img src="large-image.jpg" alt="Large Image">
</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`用于確保元素的最小尺寸，當元素的實際尺寸小于設定值時，會強制擴展到指定的最小值。值的類型與`height`和`width`相同。
**示例代碼：**
```html
<div class="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<!-- 更多鏈接 -->
</ul>
</div>
<style>
.sidebar {
background-color: #f8f9fa;
min-width: 200px; /* 側邊欄最小寬度為200px */
}
</style>
```
**三、設置行間距：line-height**
**3.1 定義行間距（line-height）**
**定義方式：**
```css
element {
line-height: value;
}
```
`line-height`屬性用于設置元素內文本行之間的垂直間距。值的類型包括：
- **數值**：如`1.5`、`2`等，表示相對于當前字體大小的倍數。
- **絕對單位**：如像素（`px`）、厘米（`cm`）等。
- **百分比**：相對于元素本身的字體大小。
- **關鍵字**：如`normal`（默認值，瀏覽器默認行間距）、`initial`、`inherit`。
**示例代碼：**
```html
<p class="loose-text">這是一段行間距為1.5倍的文本。</p>
<style>
.loose-text {
font-size: 16px;
line-height: 1.5; /* 設置行間距為字體大小的1.5倍 */
}
</style>
```
**四、實戰應用與注意事項**
**4.1 響應式設計**
結合`max-height`/`max-width`、`min-height`/`min-width`與媒體查詢（`@media`），可以輕松實現響應式布局，確保元素在不同屏幕尺寸下保持合適的大小。
**示例代碼：**
```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`設置為`auto`時，元素的尺寸通常由其內容決定。對于塊級元素，寬度默認為`auto`，高度則受內部內容影響；對于內聯元素，寬度和高度均受內容影響。**
- **使用百分比單位時，`height`的百分比基于包含塊的高度，而`width`的百分比基于包含塊的寬度。**
- **在設置`min-height`時，確保包含塊（父元素）具有足夠的高度或自身元素具有足夠的內容，否則可能無法達到預期效果。**
- **使用`line-height`時，注意與其他文本相關的屬性（如`font-size`、`vertical-align`等）的配合，以保持良好的排版效果。**
通過熟練掌握上述CSS屬性，您將能精準地控制網頁中元素的大小，實現復雜多樣的布局效果。不斷實踐并結合實際項目需求，您的前端開發技能將更上一層樓。
者：wuwhs
轉發鏈接：https://segmentfault.com/a/1190000023486410
公司的移動端業務需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務器，這樣可以減少移動端上行流量，減少用戶上傳等待時長，優化用戶體驗。前段時間小編也發布一篇關于《JS 圖片簡易壓縮【實踐】 》，有興趣的小伙伴也可以看看。
插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。
github：https://github.com/wuwhs/js-image-compressor
JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮后結果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型眾多，有些手機壓縮圖片甚至變黑。
所以本文將試圖解決如下問題：
在實際應用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉成 File（Blob） 對象，上傳到遠程圖片服務器；不妨有時候我們也需要將一個 base64 字符串壓縮之后再變為 base64 字符串傳入到遠程數據庫或者再轉成 File（Blob） 對象。一般的，它們有如下轉化關系：
下面將按照轉化關系圖中的轉化方法一一實現。
用戶通過頁面標簽 <input type="file" /> 上傳的本地圖片直接轉化 data URL 字符串形式。可以使用 FileReader 文件讀取構造函數。FileReader 對象允許 Web 應用程序異步讀取存儲在計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。該實例方法 readAsDataURL 讀取文件內容并轉化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內容。
function file2DataUrl(file, callback) {
var reader=new FileReader();
reader.onload=function () {
callback(reader.result);
};
reader.readAsDataURL(file);
}Data URL 由四個部分組成：前綴（data:）、指示數據類型的 MIME 類型、如果非文本則為可選的 base64 標記、數據本身：
data:<mediatype>,<data>
比如一張 png 格式圖片，轉化為 base64 字符串形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。
若想將用戶通過本地上傳的圖片放入緩存并 img 標簽顯示出來，除了可以利用以上方法轉化成的 base64 字符串作為圖片 src，還可以直接用 URL 對象，引用保存在 File 和 Blob 中數據的 URL。使用對象 URL 的好處是可以不必把文件內容讀取到 JavaScript 中 而直接使用文件內容。為此，只要在需要文件內容的地方提供對象 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;
});
}
}注意：要創建對象 URL，可以使用 window.URL.createObjectURL() 方法，并傳入 File 或 Blob 對象。如果不再需要相應數據，最好釋放它占用的內容。但只要有代碼在引用對象 URL，內存就不會釋放。要手工釋放內存，可以把對象 URL 傳給 window.revokeObjectURL()。
通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調函數 callback 回傳獲取到的 Image 對象。
function url2Image(url, callback) {
var image=new Image();
image.src=url;
image.onload=function() {
callback(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);
參數：
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;
}HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的 data URL 。同時可以指定輸出格式和質量。
參數分別為：
function canvas2DataUrl(canvas, quality, type) {
return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。
function dataUrl2Image(dataUrl, callback) {
var image=new Image();
image.onload=function() {
callback(image);
};
image.src=dataUrl;
}將 data URL 字符串轉化為 Blob 對象。主要思路是：先將 data URL 數據（data） 部分提取出來，用 atob 對經過 base64 編碼的字符串進行解碼，再轉化成 Unicode 編碼，存儲在Uint8Array（8位無符號整型數組，每個元素是一個字節） 類型數組，最終轉化成 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});
}HTMLCanvasElement 有 toBlob(callback, [type], [encoderOptions]) 方法創造 Blob 對象，用以展示 canvas 上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個參數指定圖片格式，如不特別指明，圖片的類型默認為 image/png，分辨率為 96dpi。第三個參數用于針對image/jpeg 格式的圖片進行輸出圖片的質量設置。
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));
}
});
}將 Blob 對象轉化成 data URL 數據，由于 FileReader 的實例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數據，這里復用上面 file2DataUrl 方法即可：
function blob2DataUrl(blob, callback) {
file2DataUrl(blob, callback);
}將 Blob 對象轉化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復用上面 file2Image 方法即可：
function blob2Image(blob, callback) {
file2Image(blob, callback);
}上傳圖片（已壓縮），可以使用 FormData 傳入文件對象，通過 XHR 直接把文件上傳到服務器。
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 讀取文件內容，轉化成二進制上傳
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);
}在熟悉以上各種圖片轉化方法的具體實現，將它們封裝在一個公用對象 util 里，再結合壓縮轉化流程圖，這里我們可以簡單實現圖片壓縮了：首先將上傳圖片轉化成 Image 對象，再將寫入到 Canvas 畫布，最后由 Canvas 對象 API 對圖片的大小和尺寸輸出調整，實現壓縮目的。
/**
* 簡易圖片壓縮方法
* @param {Object} options 相關參數
*/
(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); };
/**
* 簡易圖片壓縮構造函數
* @param {Object} options 相關參數
*/
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)
})
}
/**
* 壓縮之前，讀取圖片之后鉤子函數
*/
_proto.beforeCompress=function beforeCompress() {
if (isFunc(this.options.beforeCompress)) {
this.options.beforeCompress(this.file);
}
}
// 省略 `util` 公用方法定義
// ...
// 將 `util` 公用方法添加到實例的靜態屬性上
for (key in util) {
if (util.hasOwnProperty(key)) {
SimpleImageCompressor[key]=util[key];
}
}
})(window)這個簡易圖片壓縮方法調用和入參：
var fileEle=document.getElementById('file');
fileEle.addEventListener('change', function () {
file=this.files[0];
var options={
file: file,
quality: 0.6,
mimeType: 'image/jpeg',
// 壓縮前回調
beforeCompress: function (result) {
console.log('壓縮之前圖片尺寸大小: ', result.size);
console.log('mime 類型: ', result.type);
// 將上傳圖片在頁面預覽
// SimpleImageCompressor.file2DataUrl(result, function (url) {
// document.getElementById('origin').src=url;
// })
},
// 壓縮成功回調
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;
// })
// 上傳到遠程服務器
// SimpleImageCompressor.upload('/upload.png', result);
}
};
new SimpleImageCompressor(options);
}, false);如果看到這里的客官不嫌棄這個 demo 太簡單可以戳這里試試水。如果你有足夠的耐心多傳幾種類型圖片就會發現還存在如下問題：
俗話說“羅馬不是一天建成的”，通過上述實驗，我們發現了很多不足，下面將逐條問題分析，尋求解決方案。
壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；
為了避免壓縮圖片變形，一般采用等比縮放，首先要計算出原始圖片寬高比 aspectRatio，用戶設置的高層以 aspectRatio，得出等比縮放后的寬，若比用戶設置寬的小，則用戶設置的高為為基準縮放，否則以寬為基準縮放。
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;
}輸出圖片的尺寸確定了，接下來就是按這個尺寸創建一個 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 格式圖片同格式壓縮，壓縮率不高，還有可能出現“不減反增”現象
一般的，不建議將 png 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時反而會造成自身質量變得更大。
因為我們在“具體實現”中兩個有關壓縮關鍵 API：
均未對 png 格式圖片有壓縮效果。
有個折衷的方案，我們可以設置一個閾值，如果 png 圖片的質量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結果不至于質量太大，在此基礎上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當圖片質量大于某個值時，我們壓縮成 jpeg 格式。
// `png` 格式圖片大小超過 `convertSize`, 轉化成 `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 格式圖片在一些手機上，壓縮后出現“黑屏”現象；
由于各大瀏覽器對 Canvas 最大尺寸支持不同
如果圖片尺寸過大，再創建同尺寸畫布，再畫上圖片，就會出現異常情況，即生成的畫布沒有圖片像素，而畫布本身默認給的背景色為黑色，這樣就導致圖片“黑屏”情況。
這里可以通過控制輸出圖片最大寬高防止生成畫布越界，并且用透明色覆蓋默認黑色背景解決解決“黑屏”問題：
// ...
// 限制最小和最大寬高
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 的小伙伴可以戳這里
我們梳理了通過頁面標簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實際使用中還存在的一些意外情況，提供了相應的解決方案。將改進版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用。整理匆忙，如有問題歡迎大家指正，完～
作者：wuwhs
轉發鏈接：https://segmentfault.com/a/1190000023486410
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
