js压缩图片

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js压缩图片相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 压缩时要用到的canvas -->
    <canvas id="canvas" style="display:none;"></canvas>

    <!-- 原始图片  -->
    <img id="img" src="e.png" />

    <!-- 压缩后的图片  -->
    <img id="new_image"/>

    <script>
        var maxWidth = 300;
        var maxHeight = 300;
        // 创建 canvas
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");
        // 创建要绘制的Image对象
        var img = new Image();
        img.src = "e.png";
        // 等待img加载完毕
        img.onload = function(){
            // 与backgournd-size:contain效果相同
            if(img.width/img.height<maxWidth/maxHeight){
                c.height = img.height;
                if(img.height>maxHeight){
                    c.height = maxHeight;
                }
                c.width = img.width/img.height*c.height;
            }else{
                c.width = img.width;
                if(img.width>maxWidth){
                    c.width = maxWidth;
                }
                c.height = img.height/img.width*c.width;
            }
            ctx.drawImage(img,0,0,img.width,img.height,0,0,c.width,c.height);
            document.getElementById("new_image").src=c.toDataURL();
        };

    </script>
</body>
</html>


以上是关于js压缩图片的主要内容，如果未能解决你的问题，请参考以下文章

webpack各类压缩

在线压缩图片(TinyPNG)/ JS/CSS/HTML(YUI Compressor)

html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

这样使用Node.js压缩PNG图片，效果高达75％

前端压缩图片代码，支持移动端和pc 端，还有拍照后获取到的照片

使用 gulp 压缩图片