導航:首頁 > 圖片大全 > js圖片載入慢如何壓縮圖片

js圖片載入慢如何壓縮圖片

發布時間:2023-10-03 17:49:22

1. 前端圖片壓縮優化工具conversion

image-conversion 是一個簡單易用的 JS 圖片轉換工具,提供了多種 Image、Canvas、File 和 dataURL 之間的轉換方法。

另外,image-conversion 可以指定大小來壓縮圖片。

1、將圖像壓縮到 200kb:

2、以 0.9 的質量壓縮圖像

image-conversion 提供了多種方法來實現 Image、Canvas、File 和 dataURL 之間的轉換,如下:

1、imagetoCanvas(image[, config]) {Promise(Canvas)}

將圖像對象轉換為畫布對象。

2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}

將 dataURL 字元串轉換為 File(Blob) 對象,相當於把畫布的內容轉換成blob,type可以設置最終圖片的格式。

type的值可以為:"image/png", "image/jpeg", "image/gif"

3、compress(file, config) {Promise(Blob)}

壓縮文件(Blob)對象。

4、compressAccurately(file, config) {Promise(Blob)}

根據大小壓縮文件(Blob)對象。

5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}

將 Canvas 對象轉換為 dataURL 字元串,該方法可以進行壓縮。

6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}

將 Canvas 對象轉換為 Blob 對象,此方法可以進行壓縮。

7、dataURLtoImage(dataURL) {Promise(Image)}

將 dataURL 字元串轉換為圖像對象。

8、downloadFile(file[, fileName])

下載圖片到本地。

9、filetoDataURL(file) {Promise(string)}

將 File(Blob) 對象轉換為 dataURL 字元串。

10、urltoBlob(url) {Promise(Blob)}

通過圖像 url 載入所需的 Blob 對象。

11、urltoImage(url) {Promise(Image)}

通過圖片 url 載入所需的 Image 對象。

覺得效果不錯的請幫忙加個關注點個贊,經常分享前端實用開發技巧

閱讀全文

與js圖片載入慢如何壓縮圖片相關的資料

熱點內容
ps里圖片怎麼變黑白 瀏覽:194
word圖片題注編號顛倒 瀏覽:262
word圖片水印怎麼變清晰 瀏覽:547
盯盯拍如何導出圖片視頻 瀏覽:964
阿sa的發型圖片 瀏覽:8
男寶寶冬天衣服圖片 瀏覽:859
純情二次元男生圖片 瀏覽:82
女孩照片霸氣圖片大全黑白 瀏覽:91
怎麼讓圖片抖動輕微 瀏覽:195
方形兒童圖片可愛小熊 瀏覽:591
荔枝根雕圖片大全 瀏覽:116
棕色口紅圖片男生 瀏覽:853
可愛又搞笑的美人魚圖片 瀏覽:96
校園板報圖片簡單又漂亮 瀏覽:350
素描漫畫少女簡單圖片 瀏覽:424
放什麼圖片男生會注意你 瀏覽:522
文字圖片神仙 瀏覽:957
動漫男男做圖片大全圖片大全圖片 瀏覽:363
俏皮可愛的動作圖片 瀏覽:528
純文字我很好圖片 瀏覽:952