html5图片以文件流形式上传时失真,html5上传及压缩图像

下述插件jquery.upLoadImg.js旨在不借助任何插件的前提下，优化移动端用户在web页面上传图片卡顿或消耗流量过大问题。大概思路，先用FileReader对象从本地获取上传图像，转为base64图片流，再由此生成Image对象，用canvas按比例压缩绘制，并返回压缩后的图片流，上送给后台服务器

HTML：(html是次要的，自由发挥吧)

jquery.upLoadImg.js：

/**

* upLoadImg (http://blog.csdn.net/u598975767/article/details/75500890)

* 基于jquery+html5 上传及压缩图片

* @version v0.1

* @author benboerba

*/

;(function($){

var imgFiles=function(el,opt){

this.element=el;

this.file=el[0].files[0];

this.default={

"showImage":"",//需要展示的img标签Id

"width":375,//目标图片宽度，为保证图片不失真或变形，高度会等比例变化

"quality":0.8,//图片质量，取值0-1之间

"callBack":function(){}

};

this.options=$.extend({},this.default,opt);

};

/**

* 压缩图片 创建一个image对象，给canvas绘制使用

* @params image:图片对象

* @return 返回一个上送给后台的图片流

*/

imgFiles.prototype.compress=function(image){

var cvs = document.createElement('canvas');

//根据设备宽度高,设定缩放后的宽度，计算出缩放比例，建议以宽度为准

var scale = this.options.width / image.width;

//计算等比缩小后图片宽高

cvs.width = image.width*scale;

cvs.height = image.height*scale;

var ctx = cvs.getContext('2d');

ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

var newImageData = cvs.toDataURL(this.file.type,this.options.quality);

var sendData = newImageData.replace("data:"+this.file.type+";base64,",'');

return sendData;

};

/**

* 上传图片

*/

imgFiles.prototype.getImages=function(){

var $that=this;

var files = $that.file;

//检验是否为图像文件

if(!/image\/\w+/.test(files.type)){

alert("请选择图片");

$that.element.val("");

return false;

}

var reader = new FileReader();

//将文件以Data URL形式读入页面

reader.readAsDataURL(files);

reader.οnlοad=function(e){

var result = this.result;

if($("#"+$that.options.showImage)){

$("#"+$that.options.showImage).attr({"src": result});

}

var image = new Image();

image.src = result;

image.onload = function(){

$that.options.callBack($that.compress(image));

};

};

};

$.fn.upLoadImg=function(options){

var img= new imgFiles(this, options);

img.getImages();

};

})(jQuery);

调用js:

上述代码基于jquery，别忘了导入jquery框架！第一次封装插件，有不到的地方，望大牛指出纠正！谢谢！