利用html5压缩图片,产出base64图片

 

/*  将页面选择的图片等比压缩成指定大小(长边固定)
  file:图片文件
callBack:回调函数
maxLen:长边的长度
*/
function makePic(file,callBack,maxLen){
     var url = webkitURL.createObjectURL(file);   /* 生成图片 */   var $img = new Image();   $img.src = url;   // $('body').append($img);   $img.onload = function() {     //生成比例     var width = $img.width,height = $img.height;     //计算缩放比例     var rate=1;     if(width>=height){       if(width>maxLen){         rate=maxLen/width;       }     }else{       if(height>maxLen){         rate=maxLen/height;       }    }   $img.width=width*rate;   $img.height=height*rate;   //生成canvas   var $canvas =$('#thecanvas');   var ctx = $canvas[0].getContext('2d');   $canvas.attr({width : $img.width, height : $img.height});   ctx.drawImage($img, 0, 0, $img.width, $img.height);   var base64 = $canvas[0].toDataURL('image/jpeg',0.9);   callBack(base64);//   } } $('.unPic_list input[type=file]').bind('change',function(e){   var that=this;   for(var j=0;j<e.target.files.length;j++){     makePic(e.target.files[j],function(imgStr){       var img = new Image();       img.src=imgStr;       img.onload=function(){       $('body').append(img);
      /*此处将 imgStr.substr(22)操作即的图片二进制流,可发送到服务器*/    }   },750); } })

posted on 2015-01-09 18:06  错河之泪  阅读(367)  评论(0编辑  收藏  举报