如何將圖片壓縮並下載檔案

Posted on Edited on In Word count in article: 173 Reading time ≈ 1 mins.

建立 HTML

首先在 HTML 建立一個 File Upload 與一個 canvas

1
2
<input type="file" />
<canvas id="canvas"  width="800" height="600"></canvas>

綁定事件

接下來為 File Upload 綁定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
document.querySelector('input').addEventListener('change', function () {
    // 取得第一個檔案
    const file= this.files[0];

    // 取得 canvas
    const canvas = document.getElementById('canvas');   
    
    // 宣告 Image 物件
    let img = new Image; 

    // 建立 Image 載入事件
    img.onload = function () {
        
        // 在 canvas 載入圖片 
        canvas.getContext('2d').drawImage(img,0,0,800,600); 

        // 回收圖片物件
        URL.revokeObjectURL(img.src);   
        
        // 把 canvas 圖片轉成 Blob 格式
        canvas.toBlob((blob) => {
            // 宣告FileReader物件
            var reader = new FileReader();

            // 建立 FileReader 載入完成事件
            reader.onloadend = function () {
                console.log(reader.result.split(",")[1]);
            }
            
            // 讀取 Blob 格式物件
            reader.readAsDataURL(blob);
        }, "image/jpeg", 0.8);
    };
    // 圖片物件載入檔案
    img.src = URL.createObjectURL(file);
}, false);

📜 參考資料

  1. MDN Canvas_API