JS 圖片壓縮原理與實現(xiàn)方法詳解
本文實例講述了JS 圖片壓縮原理與實現(xiàn)方法。分享給大家供大家參考，具體如下：
前言
說起圖片壓縮，大家想到的或者平時用到的很多工具都可以實現(xiàn)，例如，客戶端類的有圖片壓縮工具 PPDuck3， JS 實現(xiàn)類的有插件 compression.js ，亦或是在線處理類的 OSS 上傳，文件上傳后，在訪問文件時中也有圖片的壓縮配置選項，不過，能不能自己擼一套 JS 實現(xiàn)的圖片壓縮代碼呢？當然可以，那我們先來理一下思路。
壓縮思路
涉及到 JS 的圖片壓縮，我的想法是需要用到 Canvas 的繪圖能力，通過調(diào)整圖片的分辨率或者繪圖質(zhì)量來達到圖片壓縮的效果，實現(xiàn)思路如下：
- 獲取上傳 Input 中的圖片對象 File
- 將圖片轉(zhuǎn)換成 base64 格式
- base64 編碼的圖片通過 Canvas 轉(zhuǎn)換壓縮，這里會用到的 Canvas 的 drawImage 以及 toDataURL 這兩個 Api，一個調(diào)節(jié)圖片的分辨率的，一個是調(diào)節(jié)圖片壓縮質(zhì)量并且輸出的，后續(xù)會有詳細介紹
- 轉(zhuǎn)換后的圖片生成對應的新圖片，然后輸出
優(yōu)缺點介紹
不過 Canvas 壓縮的方式也有著自己的優(yōu)缺點：
- 優(yōu)點：實現(xiàn)簡單，參數(shù)可以配置化，自定義圖片的尺寸，指定區(qū)域裁剪等等。
- 缺點：只有 jpeg 、webp 支持原圖尺寸下圖片質(zhì)量的調(diào)整來達到壓縮圖片的效果，其他圖片格式，僅能通過調(diào)節(jié)尺寸來實現(xiàn)
代碼實現(xiàn)
<template>
<div class="container">
<input type="file" id="input-img" @change="compress" />
<a :download="fileName" :href="compressImg" rel="external nofollow" >普通下載</a>
<button @click="downloadImg">兼容 IE 下載</button>
<div>
<img :src="compressImg" />
</div>
</div>
</template>
<script>
export default {
name: 'compress',
data: function() {
return {
compressImg: null,
fileName: null,
};
},
components: {},
methods: {
compress() {
// 獲取文件對象
const fileObj = document.querySelector('#input-img').files[0];
// 獲取文件名稱，后續(xù)下載重命名
this.fileName = `${new Date().getTime()}-${fileObj.name}`;
// 獲取文件后綴名
const fileNames = fileObj.name.split('.');
const type = fileNames[fileNames.length-1];
// 壓縮圖片
this.handleCompressImage(fileObj, type);
},
handleCompressImage(img, type) {
const vm = this;
let reader = new FileReader();
// 讀取文件
reader.readAsDataURL(img);
reader.onload = function(e) {
let image = new Image(); //新建一個img標簽
image.src = e.target.result;
image.onload = function() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
// 定義 canvas 大小，也就是壓縮后下載的圖片大小
let imageWidth = image.width; //壓縮后圖片的大小
let imageHeight = image.height;
canvas.width = imageWidth;
canvas.height = imageHeight;
// 圖片不壓縮，全部加載展示
context.drawImage(image, 0, 0);
// 圖片按壓縮尺寸載入
// let imageWidth = 500; //壓縮后圖片的大小
// let imageHeight = 200;
// context.drawImage(image, 0, 0, 500, 200);
// 圖片去截取指定位置載入
// context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);
vm.compressImg = canvas.toDataURL(`image/${type}`);
};
};
},
// base64 圖片轉(zhuǎn) blob 后下載
downloadImg() {
let parts = this.compressImg.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], {type: contentType});
this.compressImg = URL.createObjectURL(blob);
if (window.navigator.msSaveOrOpenBlob) {
// 兼容 ie 的下載方式
window.navigator.msSaveOrOpenBlob(blob, this.fileName);
}else{
const a = document.createElement('a');
a.href = this.compressImg;
a.setAttribute('download', this.fileName);
a.click();
}
},
}
};
</script>
上面的代碼是可以直接拿來看效果的，不喜歡用 Vue 的也可以把代碼稍微調(diào)整一下，下面開始具體分解一下代碼的實現(xiàn)思路
Input 上傳 File 處理
將 File 對象通過 FileReader 的 readAsDataURL 方法轉(zhuǎn)換為URL格式的字符串（base64編碼）
const fileObj = document.querySelector('#input-img').files[0];
let reader = new FileReader();
// 讀取文件
reader.readAsDataURL(fileObj);
Canvas 處理 File 對象
建立一個 Image 對象，一個 canvas 畫布，設定自己想要下載的圖片尺寸，調(diào)用 drawImage 方法在 canvas 中繪制上傳的圖片
let image = new Image(); //新建一個img標簽
image.src = e.target.result;
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
Api 解析：drawImage
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
img
就是圖片對象，可以是頁面上獲取的 DOM 對象，也可以是虛擬 DOM 中的圖片對象。
dx , dy , dWidth , dHeight
表示在 canvas 畫布上規(guī)劃出一片區(qū)域用來放置圖片，dx, dy 為繪圖位置在 Canvas 元素的 X 軸、Y 軸坐標，dWidth, dHeight 指在 Canvas 元素上繪制圖像的寬度和高度（如果不說明， 在繪制時圖片的寬度和高度不會縮放）。
sx , sy , swidth , sheight
這 4 個參數(shù)是用來裁剪源圖片的，表示圖片在 canvas 畫布上顯示的大小和位置。sx,sy 表示在源圖片上裁剪位置的 X 軸、Y 軸坐標，然后以 swidth,sheight 尺寸來選擇一個區(qū)域范圍，裁剪出來的圖片作為最終在 Canvas 上顯示的圖片內(nèi)容（ swidth,sheight 不說明的情況下，整個矩形（裁剪）從坐標的 sx 和 sy 開始，到圖片的右下角結(jié)束）。
以下為圖片繪制的實例：
context.drawImage(image, 0, 0, 100, 100); context.drawImage(image, 300, 300, 200, 200); context.drawImage(image, 0, 100, 150, 150, 300, 0, 150, 150);
Api 中奇怪之處在于，sx,sy,swidth,sheight 為選填參數(shù)，但位置在 dx, dy, dWidth, dHeight 之前。
Canvas 輸出圖片
調(diào)用 canvas 的 toDataURL 方法可以輸出 base64 格式的圖片。
canvas.toDataURL(`image/${type}`);
Api 解析：toDataURL
canvas.toDataURL(type, encoderOptions);
type 可選
圖片格式，默認為 image/png。
encoderOptions 可選
在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認值 0.92。其他參數(shù)會被忽略。
a 標簽的下載
調(diào)用 <a> 標簽的 download 屬性，即可完成圖片的下載。
Api 解析：download
// href 下載必填 <a download="filename" href="href" rel="external nofollow" > 下載 </a>
filename
選填，規(guī)定作為文件名來使用的文本。
href
文件的下載地址。
非主流瀏覽器下載處理
到此可以解決 Chroma 、 Firefox 和 Safari（自測支持） 瀏覽器的下載功能，因為 IE 等瀏覽器不支持 download 屬性，所以需要進行其他方式的下載，也就有了代碼中的后續(xù)內(nèi)容
// base64 圖片轉(zhuǎn) blob 后下載
downloadImg() {
let parts = this.compressImg.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], {type: contentType});
this.compressImg = URL.createObjectURL(blob);
if (window.navigator.msSaveOrOpenBlob) {
// 兼容 ie 的下載方式
window.navigator.msSaveOrOpenBlob(blob, this.fileName);
}else{
const a = document.createElement('a');
a.href = this.compressImg;
a.setAttribute('download', this.fileName);
a.click();
}
}
- 將之前 canvas 生成的 base64 數(shù)據(jù)拆分后，通過 atob 方法解碼
- 將解碼后的數(shù)據(jù)轉(zhuǎn)換成 Uint8Array 格式的無符號整形數(shù)組
- 轉(zhuǎn)換后的數(shù)組來生成一個 Blob 數(shù)據(jù)對象，通過
URL.createObjectURL(blob)來生成一個臨時的 DOM 對象 - 之后 IE 類瀏覽器可以調(diào)用
window.navigator.msSaveOrOpenBlob方法來執(zhí)行下載，其他瀏覽器也可以繼續(xù)通過 <a> 標簽的 download 屬性來進行下載
Api 解析：atob
base-64 解碼使用方法是 atob()。
window.atob(encodedStr)
encodedStr
必需，是一個通過 btoa() 方法編碼的字符串，btoa()是 base64 編碼的使用方法。
Api 解析：Uint8Array
new Uint8Array(length)
length
創(chuàng)建初始化為 0 的，包含 length 個元素的無符號整型數(shù)組。
Api 解析： Blob
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。
// 構(gòu)造函數(shù)允許通過其它對象創(chuàng)建 Blob 對象
new Blob([obj],{type:createType})
obj
字符串內(nèi)容
createType
要構(gòu)造的類型
兼容性 IE 10 以上
Api 解析：createObjectURL
靜態(tài)方法會創(chuàng)建一個 DOMString。
objectURL = URL.createObjectURL(object);
object
用于創(chuàng)建 URL 的 File 對象、Blob 對象或者 MediaSource 對象。
Api 解析： window.navigator
// 官方已不建議使用的文件下載方式，僅針對 ie 且兼容性 10 以上 // msSaveBlob 僅提供下載 // msSaveOrOpenBlob 支持下載和打開 window.navigator.msSaveOrOpenBlob(blob, fileName);
blob
要下載的 blob 對象
fileName
下載后命名的文件名稱。
總結(jié)
本文僅針對圖片壓縮介紹了一些思路，簡單的使用場景可能如下介紹，當然也會引申出來更多的使用場景，這些還有待大家一起挖掘。
- 上傳存儲圖片如果需要對文件大小格式有要求的，可以統(tǒng)一壓縮處理圖片
- 前臺頁面想要編輯圖片，可以在 Canvas 處理圖片的時候，加一些其他邏輯，例如添加文字，剪裁，拼圖等等操作
當然溫馨提示：因部分接口有 IE 兼容性問題，IE 瀏覽器方面，僅能支持 IE10 以上版本進行下載。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
將string解析為json的幾種方式小結(jié),需要的朋友可以參考下。2010-11-11
在Html中使用Requirejs進行模塊化開發(fā)實例詳解
在前端模塊化的時候，不僅僅是js需要進行模塊化管理，html有時候也需要模塊化管理。這里就介紹下如何通過requirejs，實現(xiàn)html代碼的模塊化開發(fā)2016-04-04
這篇文章主要介紹了微信小程序如何訪問公眾號文章，隨著小程序不斷的發(fā)展，現(xiàn)在個人的小程序也開放了很多功能了，個人小程序直接打開公眾號鏈接。在群里看到的一款小程序，點擊可以直接閱讀文章了,需要的朋友可以參考下2019-07-07
css3表現(xiàn)沖擊最大的就是動畫了，因此很有必要去事先判斷瀏覽器是否支持，寫CSS3動畫庫就只有部分瀏覽器支持2014-10-10
年底了各個公司都有抽獎活動，我也寫了一個超級簡單的代碼來實現(xiàn)抽獎效果，這里沒有華麗的Css3效果，但卻有短小精悍的js代碼。2015-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)從左向右滑動式輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
web項目開發(fā)之JS函數(shù)防抖與節(jié)流示例代碼
這篇文章主要介紹了web項目開發(fā)之JS函數(shù)防抖與節(jié)流實現(xiàn)的示例代碼及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
類型斷言是一種方式，可以手動指定變量的類型，非空斷言是一種類型斷言的特殊形式，這篇文章主要給大家介紹TypeScript 中的類型斷言和非空斷言的使用方法,需要的朋友可以參考下2023-07-07
當今移動應用開發(fā)領域,隨著用戶對于應用功能和體驗的要求不斷提高,應用程序的復雜度也在不斷增加,在這種情況下,應用程序的體積也隨之增大,為了解決這個問題,Uniapp提供了分包功能,本文將詳細介紹Uniapp分包的功能和優(yōu)勢,包括如何通過配置文件實現(xiàn)分包2023-09-09
js中substring和substr兩者區(qū)別和使用方法
這篇文章主要介紹了js中substring和substr兩者區(qū)別和使用方法,每一個步驟都有相應的文字介紹，感興趣的小伙伴們可以參考一下2015-11-11