在 Javascript 中将本地图像转换为 base64 字符串

Question

我正在尝试将 local 图像转换为 Base64 string。我没有使用任何 HTML，只需要 javascript，它在代码中引用图像的路径。

例如，转换：

C:\Users\Work\Desktop\TestImage.jpg

进入

/9j/4AAQSkZJRgABAQEASABIAAD/4QBKRXhpZgAASUkqAAgAAAADABoBBQABAAAAMgAAABsBBQABAAAAOgAAACgBAwABAAAAAgAAAAAAAAAAVOoqgJaYAABU6iqAlpgA/+IMWElDQ19QUk9GSUxFAAEBAAAMSExpbm8CEAAAbW50clJHQiBYWVogB84AAgAJAAYAMQAAYWNzcE1TRlQAAAAASUVDIH.....etc...

有很多这样的帖子，但它们似乎都以某种方式利用 HTML 来识别文件路径。我希望我可以在 javascript.

中写一个定义的文件路径
我试过了，没用：

function convertImgToBase64() { var canvas = document.createElement('CANVAS'); img = document.createElement('img'), img.src = C:\Users\Work\Desktop\TestImage.jpg; img.onload = function() { canvas.height = img.height; canvas.width = img.width; var dataURL = canvas.toDataURL('image/png'); alert(dataURL); canvas = null; }; }

一个例子有下面的html和javascript，但我希望这可以合并在一起。感谢您的支持

HTML:

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <input type='file' id="asd" /> <br> <img id="img" src="//placehold.it/1x1/" /> <div id="base"></div> </body> </html>

Javascript:

function el(id){return document.getElementById(id);} // Get elem by ID function readImage() { if ( this.files && this.files[0] ) { var FR= new FileReader(); FR.onload = function(e) { el("img").src = e.target.result; el("base").innerHTML = e.target.result; }; FR.readAsDataURL( this.files[0] ); } } el("asd").addEventListener("change", readImage, false);\

Its demo found here

Answer 1

尝试利用 XMLHttpRequest() 将 responseType 设置为 Blob ，在 XMLHttpRequest onload 事件中使用 FileReader() 将响应读取为 data URI

var xhr = new XMLHttpRequest();       
    xhr.open("GET", "/path/to/local/image/file", true); 
    xhr.responseType = "blob";
    xhr.onload = function (e) {
            console.log(this.response);
            var reader = new FileReader();
            reader.onload = function(event) {
               var res = event.target.result;
               console.log(res)
            }
            var file = this.response;
            reader.readAsDataURL(file)
    };
    xhr.send()

在 Javascript 中将本地图像转换为 base64 字符串

Convert local image to base64 string in Javascript

javascript

base64

image

local