Html5前端图片压缩

function compress(img, type) {

var width = img.width;

var height = img.height;

// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下

// var ratio;

// if ((ratio = width * height / 4000000) > 1) {

// ratio = Math.sqrt(ratio);

// width /= ratio;

// height /= ratio;

// } else {

// ratio = 1;

// }

var r;

if (width < 1280 && height < 1280) {

r = 1;

} else if ((width > 1280 || height > 1280) && width / height <= 2) {

if (width > height) {

r = width / 1280;

width /= r;

height /= r;

} else {

r = height / 1280;

width /= r;

height /= r;

}

} else if (((width > 1280 || height > 1280) && width / height > 2) && (width < 1280 || height < 1280)) {

r = 1;

} else if (width > 1280 && height > 1280 && width / height > 2) {

r = height / 1280;

width /= r;

height /= r;

}

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 * r, j * nh * r, nw * r, nh * r, 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.5);

tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

return ndata;

}