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

/* 将页面选择的图片等比压缩成指定大小(长边固定)

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

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); } })

原文：http://www.cnblogs.com/liu-liang/p/4213945.html