利用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.οnlοad=function(){       $('body').append(img);
      /*此处将 imgStr.substr(22)操作即的图片二进制流,可发送到服务器*/    }   },750); } })

转载于:https://www.cnblogs.com/liu-liang/p/4213945.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值