FileReader+canvas实现等比例压缩上传

来源：互联网发布：淘宝11销量排行编辑：程序博客网时间：2024/06/07 15:00

前段时间在做移动端的时候，遇到个问题，input 调用手机拍照上传图片的时候，图片的尺寸和大小太大了，导致了上传太慢，图片的尺寸用不是我们想要的，所以我就用FileReader+canvas实现等比例压缩上传。FileReader用这个方法获取上传图片的base64 利用canvas的drawImage和toDataURL对图片进行等比例压缩上传：代码如下

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的html5 File测试 for pic2base64</title></head><style type="text/css">    #canvas{        border: 1px solid #f70707;    }</style><body><input type="file" accept="image/*" capture="camera"  id="demo_input" /><img src="" id="demoa"></body><script>window.onload = function(){    var demo=document.getElementById("demo_input");    var demoa=document.getElementById("demoa");    //判断浏览器是否支持FileReader    if(window.FileReader){        demo.addEventListener("change",chang,false)    }else{        alert("浏览器不支持")    }    function chang(){        var file=this.files[0];        //利用正则表达式判断图片的格式        if(!/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type)){            alert("上传的图片的格式不对");            return;        }        //获取上传图片的base64        var reader=new FileReader(file);        reader.readAsDataURL(file);        //利用canvas对图片进行等比例缩放和压缩        reader.onload=function(){        var canvas=document.createElement("canvas");        var ctx=canvas.getContext("2d");        var image=new Image();            image.src=this.result;            image.onload=function(){                var cw=image.width;                var ch=image.height;                var w=image.width;                var h=image.height;                canvas.width=w;                canvas.height=h;                if(cw>400&&cw>ch){                    w=400;                    h=(400*ch)/cw;                    canvas.width=w;                    canvas.height=h;                }                if(ch>400&&ch>cw){                    h=400;                    w=(400*cw)/ch;                    canvas.width=w;                    canvas.height=h;                }                ctx.drawImage(image,0,0,w,h);                canvas.toDataURL("image/jpeg",0.7);                  }                   }    }}</script></html>

希望大牛，勿喷

0 0