html使用canvas进行图片压缩上传 (废话不说直接贴代码，不懂的话在讨论)

/**
 * 压缩_上传
 * @param tab 绑定的主键 input_type=File
 * @param certificateType 
 * @param callBackFun 异步请求信息___返回的结果 举例  function(data){alert(data)//返回数据结果处理}
 */
function upLoadImg(tab, certificateType, callBackFun) {
// 用于压缩图片的canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var maxsize = 100 * 1024;
if (!tab.files.length)
return;
var files = Array.prototype.slice.call(tab.files);
if (files.length > 1) {
return;
}
files.forEach(function(file, i) {
if (!/\/(?:jpeg|jpg|png|gif)/i.test(file.type))
return;
var reader = new FileReader();
reader.onload = function() {
var result = this.result;
var img = new Image();
img.src = result;
if (result.length <= maxsize) {
img = null;
var datas = {
"name" : certificateType,
"files" : result
}
subAjax(datas, callBackFun);
return;
}
// 图片加载完毕之后进行压缩，然后上传
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
var data = compress(img);
var datas = {
"name" : certificateType,
"files" : data
};
subAjax(datas, callBackFun);
img = null;
}
};
reader.readAsDataURL(file);
})
function subAjax(datas, fun) {
$.ajax({
url : "",
dataType : "json",
data : {
"jsonOmniData" : datas
},
async : true,
type : 'post'
}).promise().done(fun);
}
// 使用canvas对大图片进行压缩
function compress(img) {
var initSize = img.src.length;
var width = img.width;
var height = img.height;
// 如果图片大于四百万像素，计算压缩比并将大小压至400万 大约等于4Mb以下
var ratio;
if ((ratio = width * height / 4000000) > 1) {
ratio = Math.sqrt(ratio);// 求平方根
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 如果图片像素大于100万则使用瓦片绘制
var count;
if ((count = width * height / 1000000) > 1) {
count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片
// 计算每块瓦片的宽和高
var nw = ~~(width / count);
var nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for ( var i = 0; i < count; i++) {
for ( var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw
* ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
// 进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', 0.1);// 压缩比例1/10
console.log('压缩前：' + initSize);
console.log('压缩后：' + ndata.length);
console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize)
+ "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}
}