JavaScript壓縮圖片，使用Canvas壓縮圖片

array_huang 發布于2019-08-26 10:27 / 511人閱讀

摘要：選擇一張圖片圖片原始寬高圖片原始大小使用壓縮壓縮到圖片原始寬高的一半壓縮后質量壓縮后的圖片大小預覽壓縮后的圖片保存到本地在線

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)
        }
    }

在線DEMOhttps://oktools.net/image-compress

云服務器 GPU云服務器圖片壓縮圖片壓縮在線在線圖片壓縮圖片尺寸壓縮

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106212.html

JavaScript壓縮圖片，使用Canvas壓縮圖片

摘要：選擇一張圖片圖片原始寬高圖片原始大小使用壓縮壓縮到圖片原始寬高的一半壓縮后質量壓縮后的圖片大小預覽壓縮后的圖片保存到本地在線 1. 選擇一張圖片 const img_original = document.getElementById(img_original); const img_output = document.getElementById(img_outpu...

wenzi 2019-08-02 15:40 評論0 收藏0
JavaScript中的圖片處理與合成(一)

摘要：中的圖片處理與合成一引言圖片處理現在已經成為了我們生活中的剛需，想必大家也經常有這方面的需求。實際前端業務中，也經常會有很多的項目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言：圖片處理現在已經成為了我們生活中的剛需，想必大家也經常有這方面的需求。實際前端業務中，也經常會有很多的項目需要用到圖片加工和處理。由于過去一段時間公司的業務需求，讓我在這方面積累...

Charles 2019-08-22 15:01 評論0 收藏0
不得不提的前端性能優化

摘要：對于廣大的前端開發人員來說，網站構建本是家常便飯其中也不得不涉及到性能優化的問題。將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量按需加載會導致大量重繪，影響渲染性能。對于廣大的前端開發人員來說，網站構建本是家常便飯；其中也不得不涉及到性能優化的問題。之前也有接觸過，今天總結一下這方面的技巧，下面是我的一下認知，歡迎探討： ? Nu...

xushaojieaaa 2019-04-23 13:13 評論0 收藏0