JavaScript压缩图片，使用Canvas压缩图片

wenzi 发布于2019-08-02 15:40 / 1236人阅读

摘要：选择一张图片图片原始宽高图片原始大小使用压缩压缩到图片原始宽高的一半压缩后质量压缩后的图片大小预览压缩后的图片保存到本地在线

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云服务器云服务器图片压缩图片压缩在线在线图片压缩图片尺寸压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54284.html

JavaScript压缩图片，使用Canvas压缩图片

摘要：选择一张图片图片原始宽高图片原始大小使用压缩压缩到图片原始宽高的一半压缩后质量压缩后的图片大小预览压缩后的图片保存到本地在线 1. 选择一张图片 const img_original = document.getElementById(img_original); const img_output = document.getElementById(img_outpu...

array_huang 2019-08-26 10:27 评论0 收藏0
JavaScript中的图片处理与合成(一)

摘要：中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累...

Charles 2019-08-22 15:01 评论0 收藏0
不得不提的前端性能优化

摘要：对于广大的前端开发人员来说，网站构建本是家常便饭其中也不得不涉及到性能优化的问题。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量按需加载会导致大量重绘，影响渲染性能。对于广大的前端开发人员来说，网站构建本是家常便饭；其中也不得不涉及到性能优化的问题。之前也有接触过，今天总结一下这方面的技巧，下面是我的一下认知，欢迎探讨： Nu...

xushaojieaaa 2019-04-23 13:13 评论0 收藏0