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

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

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