js img轉換base64


方法一: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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM