[英]Convert local image to base64 string in Javascript
我正在嘗試將本地圖像轉換為Base64 字符串 。 我沒有使用任何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);\
嘗試利用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()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.