方法一:canvas
1 <script type="text/javascript"> 2 function getBase64Image(img) { 3 var canvas = document.createElement("canvas"); 4 canvas.width = img.width; 5 canvas.height = img.height; 6 var ctx = canvas.getContext("2d"); 7 ctx.drawImage(img, 0, 0, img.width, img.height); 8 var dataURL = canvas.toDataURL("image/png"); 9 return dataURL 10 // return dataURL.replace("data:image/png;base64,", ""); 11 } 12 13 14 function main() { 15 var img = document.createElement('img'); 16 img.src = './images/Game of Thrones.jpg'; //此處自己替換本地圖片的地址 17 img.onload =function() { 18 var data = getBase64Image(img); 19 var img1 = document.createElement('img'); 20 img1.src = data; 21 document.body.appendChild(img1); 22 console.log(data); 23 } 24 } 25 main() 26 27 </script>
方法二:FileReader
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>通過filereader接口讀取文件</title> 5 <script type="text/javascript"> 6 function readAsDataURL() 7 { 8 if(typeof FileReader=='undifined') //判斷瀏覽器是否支持filereader 9 { 10 result.innerHTML="<p>抱歉，你的瀏覽器不支持 FileReader</p>"; 11 return false; 12 } 13 var file=document.getElementById("imagefile").files[0]; 14 if(!/image\/\w+/.test(file.type)) //判斷獲取的是否為圖片文件 15 { 16 alert("請確保文件為圖像文件"); 17 return false; 18 } 19 var reader=new FileReader(); 20 reader.readAsDataURL(file); 21 reader.onload=function(e) 22 { 23 var result=document.getElementById("result"); 24 result.innerHTML='<img src="'+this.result+'" alt=""/>' 25 } 26 27 } 28 </script> 29 </head> 30 31 <body> 32 <p> 33 <label>請選擇一個文件：</label> 34 <input type="file" id="imagefile" /> 35 <input type="button" value="讀取圖像" onClick="readAsDataURL();" /> 36 </p> 37 <div name="result" id="result"> 38 <!-- 這里用來顯示圖片結果--> 39 </div> 40 </body> 41 </html>