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,canvas,compress)