html base64 js再压缩,js压缩图片后再将base64转换为file文件亲测可用

上传图片

var filechooser = document.getElementById("input_file");//inupt type="file" 的id

// 用于压缩图片的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;

//upload 是按钮的id

$("#upload").on("click", function() {

filechooser.click();

})

.on("touchstart", function() {

$(this).addClass("touch")

})

.on("touchend", function() {

$(this).removeClass("touch")

});

var suffix;

filechooser.onchange = function() {

if (!this.files.length) return;

var files = Array.prototype.slice.call(this.files);

var file = files[0];

suffix = file.name.substring(file.name.indexOf("\."));

var reader = new FileReader();

//获取图片大小

var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";

reader.onload = function() {

var result = this.result;

console.log(result)

var img = new Image();

img.src = result;

//如果图片大小小于100kb，则直接上传

if (result.length <= maxsize) {

img = null;

upload(result, file.type, $(li));

return;

}

// 图片加载完毕之后进行压缩，然后上传

if (img.complete) {

callback();

} else {

img.onload = callback;

}

function callback() {

var data = compress(img, file.type);

var str = dataURLtoFile(data, ‘tmp‘+suffix);

}

};

reader.readAsDataURL(file);

};

//使用canvas对大图片进行压缩

function compress(img, type) {

var initSize = img.src.length;//应该是图片的整个大小像素或图片大小

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;

}

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(type, 0.1);

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;

}

//将base64转换为file文件

function dataURLtoFile(dataurl, filename) {

var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, {type:mime});

}

原文：https://www.cnblogs.com/liang-feng/p/11718781.html