JS：如何在沒有XMLHttpRequest的情況下對base64進行編碼？

Question

我正在嘗試對本地文件進行base64編碼。 它位於我的.js文件旁邊，因此沒有任何上傳操作。 像解決這個 （使用XMLHttpRequest ），得到一個跨站點腳本錯誤。

我正在嘗試類似的方法（雖然不起作用，但這可能有助於解釋我的問題）：

var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
   var res = e.target.result;
   console.log(res);
};
var f = reader.readAsDataURL(file);

是否有人在本地進行此操作？

Answer 1

像解決這個 （使用XMLHttpRequest的），得到一個跨站點腳本錯誤。

如果使用chrome或Chrome瀏覽器，則可以使用--allow-file-access-from-files標志設置啟動，以允許使用XMLHttpRequest()或canvas.toDataURL()從本地文件系統請求資源。

您可以使用<img>元素， <canvas>元素.toDataURL()創建本地圖像文件的data URL ，而無需使用XMLHttpRequest()

var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
  var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
  console.log(res);
}
img.src = file;

您可以選擇使用XMLHttpRequest() ，如Javascript中將本地圖像轉換為base64字符串中所述 。

另請參見如何使用java腳本打印文件夾內的所有txt文件 。

---

有關兩種方法返回的data URI的區別的詳細信息，請參見canvas2d toDataURL（）在不同瀏覽器上的不同輸出

如@Kaiido在下面的評論中所述

它將首先對其進行解碼，在此階段它仍然是您的文件，然后將其繪制到畫布上（現在它只是原始像素），最后它將對其進行重新編碼（與您的原始文件無關）檢查dataURI字符串...完全不同，即使您從兩個不同的瀏覽器進行畫布操作，您也會獲得不同的輸出，而FileReader始終會為您提供相同的輸出，因為它直接對文件進行編碼，因此不會解碼它。