前端js图片压缩

Posted 小数点就是问题

tags:

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

今天被问到前端怎么图片压缩，然后就一顿的查资源，终于知道前端怎么压缩图片。

关键：

FileReader()

toDataURL()

上面两个是关键方法，是html5后出现的好东西。

就是把图片转换成Base64编码，那样就可以不用理图片在哪了，

他就被你转换成编码了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js压缩图片</title>
    <script src="jquery.js"></script>
</head>
<body>
    <input type="file" name="file" id="file">
    <div id="container"></div>
    
    <script>
    /*图片地址
    https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E9%AB%98%E6%B8%85%E7%BE%8E%E5%A5%B3%20%E4%B8%9D%E8%A2%9C%E5%B7%A8%E4%B9%B3&step_word=&hs=0&pn=1&spn=0&di=57234189540&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3589338782%2C536437810&os=3988412231%2C488396405&simid=3515890414%2C233897128&adpicid=0&lpn=0&ln=1389&fr=&fmq=1490709487003_R&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150416%2F139-1504161AK9.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bkzcc_z%26e3Bv54AzdH3F4jtgektzitAzdH3F8l9c9_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0
    */
    $(function(){
        $("#file").on("change",function(){
            var file=this.files[0];
            photoCompress(file,50,$("#container")[0])

        });
    })


/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
 */
    function photoCompress(file,w,objDiv){
        var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.onload=function(){
                var re=this.result;
                canvasDataURL(re,w,objDiv)
            }
    }
    function canvasDataURL(re,w,objDiv){
        var newImg=new Image();
        newImg.src=re;
        var imgWidth,imgHeight,offsetX=0,offsetY=0;
        newImg.onload=function(){
            var img=document.createElement("img");
            img.src=newImg.src;
            imgWidth=img.width;
            imgHeight=img.height;
            var canvas=document.createElement("canvas");
            canvas.width=w;
            canvas.height=w;
            var ctx=canvas.getContext("2d");
            ctx.clearRect(0,0,w,w);
            if(imgWidth>imgHeight){
                imgWidth=w*imgWidth/imgHeight;
                imgHeight=w;
                offsetX=-Math.round((imgWidth-w)/2);
            }else{
                imgHeight=w*imgHeight/imgWidth;
                imgWidth=w;
                offsetY=-Math.round((imgHeight-w)/2);
            }
            ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
            var base64=canvas.toDataURL("image/jpeg",0.7);
            if(typeof objDiv == "object"){
                objDiv.appendChild(canvas);
            }else if(typeof objDiv=="function"){
                objDiv(base64);
            }
        }
        
    }

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

直接调用这个方法:

photoCompress()
传进参数就可以实现压缩了，这是上传图片的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js压缩图片</title>
    <script src="jquery.js"></script>
</head>
<body>
    <input type="file" name="file" id="file">
    <div id="container"></div>
    
    <script>
    /*跨域是无法做的*/
    $(function(){

        var newImg=new Image();
        newImg.src="./timg.jpg";
        newImg.onload=function(){
            var currentImg=document.createElement("img");
            currentImg.src=newImg.src;
            photoCompress(currentImg,50,$("#container")[0])
        }
    })


/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
 */
    function photoCompress(file,w,objDiv){
        if(file.tagName.toLocaleLowerCase()=="img"){
            canvasDataURL(file.src,w,objDiv);
            return false;
        }
        var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.onload=function(){
                var re=this.result;
                canvasDataURL(re,w,objDiv)
            }
    }
    function canvasDataURL(re,w,objDiv){
        var newImg=new Image();
        newImg.src=re;
        var imgWidth,imgHeight,offsetX=0,offsetY=0;
        newImg.onload=function(){
            var img=document.createElement("img");
            img.src=newImg.src;
            imgWidth=img.width;
            imgHeight=img.height;
            var canvas=document.createElement("canvas");
            canvas.width=w;
            canvas.height=w;
            var ctx=canvas.getContext("2d");
            ctx.clearRect(0,0,w,w);
            if(imgWidth>imgHeight){
                imgWidth=w*imgWidth/imgHeight;
                imgHeight=w;
                offsetX=-Math.round((imgWidth-w)/2);
            }else{
                imgHeight=w*imgHeight/imgWidth;
                imgWidth=w;
                offsetY=-Math.round((imgHeight-w)/2);
            }
            ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
            var base64=canvas.toDataURL("image/jpeg",0.7);
            if(typeof objDiv == "object"){
                objDiv.appendChild(canvas);
            }else if(typeof objDiv=="function"){
                objDiv(base64);
            }
        }
        
    }

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

这是同域图片压缩。

 






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

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

图片纯前端JS压缩的实现

前端图片压缩上传(纯js的质量压缩，非大小压缩)

前端图片压缩上传(纯js的质量压缩，非长宽压缩)

原生JS，前端压缩图片方案

Glup--用来压缩前端js，css, 图片资源