html5前端压缩图片,html5 FileReader+Canvas 前端压缩图片（IE9及以下浏览器不支持）...

利用h5的FileReader属性读取图片文件，建立canvas画布，绘制图片

canvas{

display: none;

}

#show:checked ~ canvas{

display: block;

}

显示画布？

function change(self){

var press =function() {//上传图片

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

pics = Pic.replace(/^data:image\/(png|jpg);base64,/, "");//pics是要上传的值，去掉了前缀

//document.getElementsByTagName("img")[0].src=Pic;//测试部分

}

var getStyle =function(obj, attr) {//获取高度的兼容,

if (obj.currentStyle) {

return obj.currentStyle[attr];//IE

} else {

return getComputedStyle(obj, false)[attr];//chrome,firfox

}

}

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

var Cntx = Cnv.getContext('2d');//画布就绪

var imgs = new Image();//新建图片对象

var tmpFile = self.files[0];

var reader = new FileReader();//用户读取手机上的文件 ie9及以下浏览器不支持filereader

reader.readAsDataURL(tmpFile);//文件编码成Data URL

reader.onload = function (e) {//文件读取完成时执行

var url = e.target.result;//e.target.result读取文件编码

imgs.src = url;

imgs.onload = function () {

var m = imgs.width / imgs.height,

n = parseFloat(getStyle(imgs, 'height'));//获取图片高度

Cnv.height = 200; //该值影响缩放后图片的大小,此处设置图片高度为100px

Cnv.width = 200 * m;//宽度跟随高度变化

Cntx.drawImage(imgs, 0, 0, Cnv.width, Cnv.height);//画布绘制

press();//调用function上传图片

};

};

}