现在手机拍的照片动不动就是几m，当用户上传手机里的照片时一个消耗流量大，一个上传时间长，为了解决这个问题，就需要压缩图片：
想法：利用canvas重绘图片，保持宽高比不变，具体宽高根本具体情况而定。
代码 :
html:
<input type="file" id="upload" /><p>压缩前：</p><img id="oldImg" src=""/ alt="用canvas怎么压缩图片？" ><p>压缩后：</p><img id="newImg" src=""/ alt="用canvas怎么压缩图片？" >
js:
var oldImg = document.getElementById("oldImg");var newImg = document.getElementById("newImg");//创建一个隐藏的canvasvar canvas = document.createElement("canvas");
canvas.id = "myCanvas";
canvas.style.display = "none";
document.body.appendChild(canvas);
var cxt = canvas.getContext('2d');var upload = document.getElementById("upload");
upload.onchange = function(){//获取input file里面的图片路径，该路径为blob格式var url = getObjectURL(this.files[0]);
oldImg.src = url;
canvasImg.src = oldImg.src;
canvasImg.onload = function(){//这是一个过渡的img,当这个img加载完成时绘制到canvas上面var m = oldImg.height/oldImg.width;
canvas.width = 375;
canvas.height = canvas.width*m;
cxt.drawImage(canvasImg,0,0,canvas.width,canvas.height);//canvas绘制完成则转换为base64并传到新的图片上，再删除canvasvar Pic = document.getElementById("myCanvas").toDataURL("image/png");
newImg.src = Pic;
document.body.removeChild(canvas);}
}//建立一個可存取到該file的urlfunction getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);
}return url;
}效果图 :
I-Shop购物系统
下载
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
该效果图是在电脑端测试的，手机端类似：
备注 :
该方法转换成的是base64格式的图片，在前端页面代码里面看着很长，不舒服，有一个解决方法是等图片传到服务器之后，压缩后的图片直接显示服务器上的图片地址。
