現在手機拍的照片動不動就是幾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怎麼壓縮圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
