html base64码压缩,移动端前端压缩上传图片（canvas与base64位编码）

注释已写在文件里，可直接复制

压缩前的尺寸：

压缩后的尺寸

直接上代码

function change(self){

// data为最后要传送到后台的数据

var data = {};

var press =function() {

// 转码为base64位

var Pic = document.getElementById('input_canvas').toDataURL("image/png"),

// 去掉头部

pics = Pic.replace(/^data:image\/(png|jpg);base64,/, "");

// 图片数据放入data

data.img = pics;

}

var getStyle =function(obj, attr) {

// 用于获取图片宽高的样式兼容

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

}

// 新建canvas画布

var Cnv = document.getElementById('input_canvas');

var Cntx = Cnv.getContext('2d');

// 新建图片

var imgss = new Image();

// 获取上传的图片

var tmpFile = self.files[0];

// 新建文件

var reader = new FileReader();

// 上传的文件转码

reader.readAsDataURL(tmpFile);

reader.onload = function (e) {

var url = e.target.result;

imgss.src = url;

imgss.onload = function () {

//宽高比例

var m = imgss.width / imgss.height,

n = parseFloat(getStyle(imgss, 'height'));

Cnv.height = 100; //该值影响缩放后图片的大小

Cnv.width = Cnv.height * m;

//绘制画布(图片缩放的过程)

Cntx.drawImage(imgss, 0, 0, Cnv.width, Cnv.height);

};

};

setTimeout(function () {

press();//引入function，处理数据

}, 50);

console.log(data) //验证

}