JS壓縮圖片，在線圖片壓縮，Cavas壓縮圖片

在線DEMOhttps://oktools.net/tinyimg

1. 選擇一張圖片

  const img_original = document.getElementById('img_original');
    const img_output = document.getElementById('img_output');
    let blob;
    
    function preview(file) {
        let reader = new FileReader();
        reader.onload = function () {
            img_original.src = this.result;
            img_original.onload = () => {
                console.log('圖片原始寬高:', img_original.naturalWidth, img_original.naturalHeight);
                console.log('圖片原始大小:', file.size)
            }
        };
        reader.readAsDataURL(file);
    }

2. 使用Canvas壓縮

  function compress() {
        // 壓縮到圖片原始寬高的一半
        let w = img_original.naturalWidth / 2;
        let h = img_original.naturalHeight / 2;

        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(img_original, 0, 0, w, h);

        const base64 = canvas.toDataURL('image/jpeg', 0.75);// 壓縮後質量
        const bytes = window.atob(base64.split(',')[1]);
        const ab = new ArrayBuffer(bytes.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        blob = new Blob([ab], {type: 'image/jpeg'});

        console.log('壓縮後的圖片大小', blob.size);
        // 預覽壓縮後的圖片
        img_output.src = base64
    }

3. 保存到本地

 function save() {
        if (blob) {
            let a = document.createElement('a');
            let event = new MouseEvent('click');
            a.download = Math.round(new Date() / 1000) + '.jpg';
            a.href = URL.createObjectURL(blob);
            a.dispatchEvent(event)
        }
    }

在線DEMO https://oktools.net/tinyimg