JS：我如何base64編碼本地文件沒有XMLHttpRequest？

我想base64編碼本地文件。它位於我的.js文件旁邊，因此沒有正在進行的上傳。諸如this（使用XMLHttpRequest）之類的解決方案會出現跨站點腳本錯誤。JS：我如何base64編碼本地文件沒有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);

任何人有任何經驗，這樣做本地？

來源

2016-08-11 CD-RUM

所以你想base64編碼文件在磁盤上？ –

這是使用nodejs還是在瀏覽器中？ – pcnate

像this（使用XMLHttpRequest）的解決方案得到了一個跨站點腳本錯誤。

如果使用Chrome或Chromium瀏覽器，你可以用--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()截至Convert local image to base64 string in Javascript描述。參見How to print all the txt files inside a folder using java script。

對於來自這兩種方法返回data URI的差異的詳細信息，請參閱canvas2d toDataURL() different output on different browser

在comment低於

通過@Kaiido如上所述將首先對其進行解碼，在這個階段，它仍然是你的文件，那麼它會將它繪製到畫布上（現在它只是原始像素），最後它會重新編碼它（它與原始文件無關）檢查dataURI字符串...即使你在兩個不同的瀏覽器上執行畫布操作，它們也會有很大的不同，你會得到不同的輸出，而FileReader總是會給你相同的輸出，因爲它直接對文件進行編碼，它不解碼它。

來源

2016-08-11 05:13:41 guest271314

其實我認爲這個標誌也是canvas方法所必需的，如果瀏覽器阻止了'file：//'xhr，那麼如果已經繪製了這個協議的圖像，就會污染畫布。此外，請記住，此解決方法不會提供文件的確切表示形式，它將首先解碼爲原始位圖，然後重新編碼爲您設置爲'toDataURL（）'的參數的任何內容。哦，你總是忘記在最近的例子中設置畫布的寬度和高度，將它們包含在IMO中會是一個好習慣。 – Kaiido

@Kaiido查看更新後的帖子。 – guest271314

@Kaiido在'.toDataURL（）'中包含'type'的設置。在問題和初始答案中錯過了該部分。 _「而且它甚至不會在沒有設置標誌的情況下作爲解決實際問題的解決方法，這也應該清楚。「_相信OP現在很清楚，因爲沒有設置標誌就返回了錯誤？ – guest271314

JS：我如何base64編碼本地文件沒有XMLHttpRequest？

回答

相關問題