前段時間在做移動端的時候，遇到個問題，input 調用手機拍照上傳圖檔的時候，圖檔的尺寸和大小太大了，導緻了上傳太慢，圖檔的尺寸用不是我們想要的，是以我就用FileReader+canvas實作等比例壓縮上傳。FileReader用這個方法擷取上傳圖檔的base64 利用canvas的drawImage和toDataURL對圖檔進行等比例壓縮上傳：代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡單的html5 File測試 for pic2base64</title>
</head>
<style type="text/css">
#canvas{
border: 1px solid #f70707;
}
</style>
<body>
<input type="file" accept="image/*" capture="camera" id="demo_input" />
<img src="" id="demoa">
</body>
<script>
window.onload = function(){
var demo=document.getElementById("demo_input");
var demoa=document.getElementById("demoa");
//判斷浏覽器是否支援FileReader
if(window.FileReader){
demo.addEventListener("change",chang,false)
}else{
alert("浏覽器不支援")
}
function chang(){
var file=this.files[0];
//利用正規表達式判斷圖檔的格式
if(!/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type)){
alert("上傳的圖檔的格式不對");
return;
}
//擷取上傳圖檔的base64
var reader=new FileReader(file);
reader.readAsDataURL(file);
//利用canvas對圖檔進行等比例縮放和壓縮
reader.οnlοad=function(){
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
var image=new Image();
image.src=this.result;
image.οnlοad=function(){
var cw=image.width;
var ch=image.height;
var w=image.width;
var h=image.height;
canvas.width=w;
canvas.height=h;
if(cw>400&&cw>ch){
w=400;
h=(400*ch)/cw;
canvas.width=w;
canvas.height=h;
}
if(ch>400&&ch>cw){
h=400;
w=(400*cw)/ch;
canvas.width=w;
canvas.height=h;
}
ctx.drawImage(image,0,0,w,h);
canvas.toDataURL("image/jpeg",0.7);
}
}
}
}
</script>
</html>
希望大牛，勿噴
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)