Javascript 在Javascript中将本地图像转换为base64字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32833797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert local image to base64 string in Javascript
提问by Mathomatic
I'm trying to convert a localimage to Base64 string. I am not using any HTML and simply need javascript which references the image's path within the code.
我正在尝试将本地图像转换为 Base64 string。我没有使用任何 HTML，只需要在代码中引用图像路径的 javascript。
For instance, converting:
例如，转换：
C:\Users\Work\Desktop\TestImage.jpg
into
进入
/9j/4AAQSkZJRgABAQEASABIAAD/4QBKRXhpZgAASUkqAAgAAAADABoBBQABAAAAMgAAABsBBQABAAAAOgAAACgBAwABAAAAAgAAAAAAAAAAVOoqgJaYAABU6iqAlpgA/+IMWElDQ19QUk9GSUxFAAEBAAAMSExpbm8CEAAAbW50clJHQiBYWVogB84AAgAJAAYAMQAAYWNzcE1TRlQAAAAASUVDIH.....etc...
There are many posts like this but they all seem to utilize HTML in some way, in order to identify the file path. I'm hoping I can write a defined filepath withinthe javascript.
有很多这样的帖子，但它们似乎都以某种方式利用了 HTML，以便识别文件路径。我希望我可以在javascript 中编写一个定义的文件路径。
I tried this to no avail:
我试过这个无济于事：
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;
};
}
One example has the following html and javascript, but I'm hoping this can be consolidated together. Thanks for your support
一个示例包含以下 html 和 javascript，但我希望可以将它们合并在一起。谢谢您的支持
HTML:
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:
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);\
回答by guest271314
Try utilizing XMLHttpRequest()set responseTypeto Blob, use FileReader()at XMLHttpRequestonloadevent to read response as data URI
尝试使用XMLHttpRequest()set responseTypeto Blob，使用FileReader()atXMLHttpRequestonload事件读取响应为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()
