利用html5压缩图片，产出二进制数据流

浏览数：117 / 时间：2015年06月09日

/*  将页面选择的图片等比压缩成指定大小（长边固定）
　　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); } })

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。