现在手机拍的照片动不动就是几m，当用户上传手机里的照片时一个消耗流量大，一个上传时间长，为了解决这个问题，就需要压缩图片：
想法：利用canvas重绘图片，保持宽高比不变，具体宽高根本具体情况而定。
代码 :
html:
<input type="file" id="upload" /><p>压缩前：</p><img id="oldimg" src=""/><p>压缩后：</p><img id="newimg" src=""/>
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; }
效果图 :
该效果图是在电脑端测试的，手机端类似：
备注 :
该方法转换成的是base64格式的图片，在前端页面代码里面看着很长，不舒服，有一个解决方法是等图片传到服务器之后，压缩后的图片直接显示服务器上的图片地址。
以上就是用canvas怎么压缩图片？的详细内容。