JavaScript實現(xiàn)圖像壓縮的方法
JavaScript 可以使用類似于 canvas 和 web workers 來實現(xiàn)圖像壓縮。
使用 canvas,可以將圖像繪制到 canvas 上,然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉(zhuǎn)換為不同格式的圖像。在這些方法中指定圖像質(zhì)量參數(shù)即可實現(xiàn)壓縮。
使用 web workers,可以在后臺執(zhí)行圖像壓縮,以避免阻塞 UI 線程。
但是 javascript 因為安全限制,不能操作本地文件,所以一般使用在瀏覽器端上傳圖片,使用js進行壓縮處理,上傳到服務端,后續(xù)處理。
在 JavaScript 中進行圖像壓縮有一些第三方庫可供使用,比如:
- canvas-toBlob.js: 在不支持 toBlob() 的瀏覽器中提供對 toBlob() 的支持。
- lwip: 一個 JavaScript 的圖像處理庫,可以實現(xiàn)圖像的壓縮,旋轉(zhuǎn),裁剪等操作
- browser-image-resizer: 基于 canvas 和 web workers 的 JavaScript 圖像壓縮庫。
- jpeg-js: 使用 JavaScript 實現(xiàn)的 JPEG 壓縮庫,可以在瀏覽器或 Node.js 環(huán)境中使用。
使用這些庫進行壓縮時需要注意的是,它們在性能上可能有所限制。對于大型圖像,壓縮可能需要相當長的時間??赡苄枰谟脩羯蟼鲌D像時顯示加載條或消息,以提醒用戶正在進行壓縮。
一、簡單壓縮
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上,然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式。Data URL 是一種將數(shù)據(jù)嵌入 URL 的格式,可以在不需要網(wǎng)絡請求的情況下直接在瀏覽器中加載圖像。
在調(diào)用 toDataURL() 方法時,可以使用第二個參數(shù)來指定圖像質(zhì)量。該參數(shù)的值應該在 0 到 1 之間,表示圖像質(zhì)量的百分比。0 表示最低質(zhì)量,1 表示最高質(zhì)量。
這是一個使用 canvas 和 JavaScript 壓縮圖像的示例代碼:
// 獲取 canvas 元素 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 創(chuàng)建 Image 對象 var img = new Image(); img.src = 'image.jpg'; img.onload = function() { // 繪制圖像到 canvas canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); // 使用 toDataURL 方法壓縮圖像 var dataUrl = canvas.toDataURL('image/jpeg', 0.5); // 使用新的 Data URL 更新圖像 img.src = dataUrl; }
這個例子中,圖片會使用 jpeg 格式壓縮,質(zhì)量為50%,壓縮后的圖片會被重新賦值回img.src里,可以改變其他參數(shù)得到不同的壓縮效果
二、使用canvas 將base64 圖像壓縮到指定文件大小以內(nèi)
1、 方法一
首先使用 atob() 函數(shù)將 base64 圖像數(shù)據(jù)解碼為二進制字符串,然后創(chuàng)建一個新的 Blob 對象,并使用 FileReader 讀取 Blob 對象。
接下來,使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上,并使用 canvas.toBlob() 方法將圖像轉(zhuǎn)換為 Blob 對象。
最后,檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過,使用不同的圖像質(zhì)量再次壓縮圖像,直到它的大小小于給定的最大大小為止.
下面是一個示例代碼:
var maxSize = 100 * 1024; // 最大文件大小為100KB var img = new Image(); img.src = base64Image; img.onload = function () { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var width = img.width; var height = img.height; canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); var quality = 0.8; var resultBlob; do { canvas.toBlob(function (blob) { resultBlob = blob; }, 'image/jpeg', quality); quality -= 0.1; } while (resultBlob.size > maxSize && quality > 0.1); // do something with resultBlob, like create a new image from it or save it. }
這個示例代碼使用 canvas 將 base64 圖像壓縮到指定的最大文件大小以內(nèi)。它使用了一個 do-while 循環(huán)來不斷地減小圖像質(zhì)量直到圖像的文件大小符合限制為止。最后它生成了一個 resultBlob 對象,它可以被用來更新頁面上的圖像或者存儲到服務器上。
值得注意的是,這個示例代碼中進行圖像壓縮時的質(zhì)量是每次減少0.1,如果壓縮后的圖像的文件大小仍然超出限制,可能需要調(diào)整這個減少量,或者考慮其他壓縮策略,比如更改圖像的分辨率等。在這個例子中壓縮文件大小是每次只減少0.1,這樣可能會花費很長時間,在實際應用中需要根據(jù)需求來進行調(diào)整。
2.、方法二
遞歸方式可避免循環(huán)導致壓縮處理過程中,頁面提示無法顯示的問題
// 計算base64編碼圖片大小 function getBase64ImageSize(base64) { const indexBase64 = base64.indexOf('base64,'); if (indexBase64 < 0) return -1; const str = base64.substr(indexBase64 + 6); // 大小單位:字節(jié) return (str.length * 0.75).toFixed(2); } /** * 圖像壓縮,默認同比例壓縮 * @param {Object} imgPath * 圖像base64編碼字符串或圖像可訪問路徑 * @param {Object} obj * obj 對象 有 width, height, quality(0-1) * @param {Object} maxSize * 指定壓縮后的文件大小,單位:字節(jié) * @param {Object} callback * 回調(diào)函數(shù)有一個參數(shù),base64的字符串數(shù)據(jù) */ function compressedImage(path, obj, maxSize, callback) { let img = new Image(); img.src = imgPath; img.onload = function () { const that = this; // 默認按比例壓縮 let w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height && obj.height * (w / scale) || h; // 生成canvas let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); canvas.width = w; canvas.height = h; ctx.drawImage(that, 0, 0, w, h); // 圖像質(zhì)量,默認圖片質(zhì)量為0.8 let quality = 0.8; if (obj.quality && obj.quality > 0 && obj.quality <= 1) { quality = obj.quality; } // quality值越小,所繪制出的圖像越模糊 let newBase64Image = canvas.toDataURL('image/jpeg', quality); let fileSize = getBase64ImageSize(newBase64Image); if (fileSize > maxSize && quality > 0.01) { if (quality > 0.05) { quality = quality - 0.05; } else { quality = 0.01; } compressedImage(imgPath, { quality: quality }, maxSize, callback); return; } // 回調(diào)函數(shù)返回壓縮后的 base64圖像 callback(newBase64Image); } }
三、使用 canvas 和 web workers 來實現(xiàn)圖像壓縮
JavaScript 的 Web Workers API 允許在瀏覽器中創(chuàng)建多個線程,可以在后臺線程中執(zhí)行 JavaScript 代碼,而不會影響主線程的響應性。因此,可以使用 Web Workers 來執(zhí)行計算密集型任務,例如圖像壓縮。
下面是一個簡單的示例代碼,展示了如何使用 Web Workers 在后臺線程中執(zhí)行圖像壓縮:
// 在主線程中 var worker = new Worker('worker.js'); worker.onmessage = function(e) { var compressedImage = e.data; // do something with compressedImage }; worker.postMessage({ image: base64Image, maxSize: 100 * 1024 // 最大文件大小為100KB });
// worker.js self.onmessage = function(e) { var image = e.data.image; var maxSize = e.data.maxSize; var img = new Image(); img.src = image; img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var width = img.width; var height = img.height; canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); var quality = 0.8; var resultBlob; do { canvas.toBlob(function(blob) { resultBlob = blob; self.postMessage(resultBlob); }, 'image/jpeg', quality); quality -= 0.1; } while (resultBlob.size > maxSize && quality > 0.1); } };
這個示例代碼中,在主線程中通過創(chuàng)建一個 Worker 對象并加載一個 worker.js 文件來啟動一個后臺線程. 在 worker.js 中,我們在 onmessage 中定義了圖像壓縮的邏輯,并使用 postMessage 來將壓縮后的圖像發(fā)送回主線程。這樣做的優(yōu)點在于,將圖像壓縮的計算密集型任務放到了后臺線程中進行,可以保證主線程的響應性不會受到影響。這樣能夠避免因為計算密集型任務而導致頁面卡頓或延遲。
需要注意的是,Web Workers 不能直接訪問 DOM,所以需要使用 postMessage 在主線程和后臺線程之間傳遞數(shù)據(jù)。
這只是一個簡單的示例,實際應用中可能需要根據(jù)需求進行更多的定制。
到此這篇關于JavaScript實現(xiàn)圖像壓縮的方法的文章就介紹到這了,更多相關js 圖像壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
webpack圖片轉(zhuǎn)為base64的實現(xiàn)示例
在開發(fā)過程中,圖片轉(zhuǎn)成base64是常有的事,本文主要介紹了webpack圖片轉(zhuǎn)為base64的實現(xiàn)示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12JavaScript ES6中export、import與export default的用法和區(qū)別
這篇文章主要給大家介紹了JavaScript ES6中export、import與export default的用法和區(qū)別,文中介紹的非常詳細,相信對大家學習ES6會有一定的幫助,需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03