1. JS版base64獲取
html代碼
<body>
<input type="file" id="myFile" onchange="sub()" />
</body>
JS代碼
<script type="text/javascript">
function sub(){
var myFile = document.getElementById("myFile").files[0];
var fileRead = new FileReader();
fileRead.readAsDataURL(myFile);
fileRead.onload = function(e){
var base64 = e.target.result;
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
}
</script>
解釋：
- var myFile = document.getElementById("myFile").files[0];
.files[0] 獲取 在input上傳的圖片 -
var fileRead = new FileReader();
HTML5 定義了 FileReader 作為文件API的重要成員用于讀取文件，根據W3C的定義FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型
new FileReader的實例有4個方法
new FileReader
readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
fileRead.readAsDataURL(myFile);
FileReader隨想的readAsDataURL方法可以將讀取到的文件編碼成Data URL，Data URL是一項特殊技術，可以講資料（圖片）內嵌在網頁之中，不用放在外部文件。使用Data URL的好處是，不需要額外的發送一個HTTP請求到服務器端取得的額外資料，缺點是，網頁的大小可能會變大，它適合應用在內嵌小圖片。-
fileRead.onload = function(e)中的e
如下圖所示，e是一個對象，e.target.result就是我們想獲取的上傳圖片轉化為的base64
image.png var img = new Image();
最后我們創建一個img圖片，將img的src設置成我們獲取到的base64
2. canvas版base64獲取
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="sub()">點擊</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "red";
context.fillRect(100,100,100,100);
function sub(){
var base64 = canvas.toDataURL();
console.log(base64)
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
</script>
解釋：
- canvas.toDataURL()
FileReader對象也有類似的方法，比如.readAsDataURL()，然而它只接受file或blob類型，而這兩種類型一般只能通過<input[type=file]>元素的files屬性獲取，或者用Blob()構造函數手工創建一個新的對象。尷尬的是我們當前只有圖片路徑，受制于瀏覽器的安全策略，<input[type=file]>的files屬性是只讀的，而Blob()構造函數只接受文件內容，兩種方式都無法通過圖片路徑直接獲取。上文中假設的應用場景迫使我們必先考慮如何通過路徑獲取到圖片內容。<img>是可以的，并且可以被繪制到<canvas>中，而<canvas>正巧擁有.toDataURL()方法。
