HTML JavaScript 將圖片和 base64 字串相互轉換

要將圖片檔案儲存和傳輸有點麻煩,有沒有比較簡單的方式?有的,就是轉換為 base64 字串!要丟要接要存要顯示都非常方便!快來看看本篇的完整示範。

選擇檔案,將圖片檔案顯示在畫面上,並轉換為 base64 字串

html:
    
<input type="file" accept="image/*" id="fileInput"/>
<br/>
<img id="previewImage"/>
<br/>
<textarea id="base64Text"></textarea>
    

javascript:
    
const fileInput = document.getElementById("fileInput");
const base64Text = document.getElementById("base64Text");
const previewImage = document.getElementById("previewImage");

fileInput.addEventListener("change", function () {
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function () {
        base64Text.value = reader.result;
        previewImage.src = reader.result;
    });

    reader.readAsDataURL(file);
});
    

增加一個按鈕,用來將 base64 文字轉換為圖片:
    
<button onclick="previewImage.src = base64Text.value">Show Image</button>
    

再增加一個按鈕,將 base64 內容中的圖片下載:
    
<button onclick="downloadImage(base64Text.value)">Download Image(base64)</button>

<script>
function downloadImage(base64) {
    const link = document.createElement("a");
    link.download = "image.png";
    link.href = base64;
    link.click();
}
</script>
    

對了,那假設要將 img 標籤中的圖片下載呢?
只要變更傳入資料即可。
    
<button onclick="downloadImage(previewImage.src)">Download Image(img)</button>
    

留言