在Javascript中将本地图像转换为base64字符串
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
,使用FileReader()
在XMLHttpRequest
onload
事件上读取响应为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()
相关文章:
- 如何使用jquery将base64图像路径转换为真实路径
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- Cordova图像选取器转换为base64
- 如何在fabricjs中嵌入图像base64将画布转换为SVG
- 将Byte数组转换为Angularjs中的Base64字符串
- 从 Base64 转换图像时出错 - HTMLImageElement 已损坏
- 将Base64转换为R格式的PNG/JPEG文件
- 将SVG过滤器应用的图像转换为二进制或base64以保存在后端
- 图像大小与其base64字符串转换长度之间的比率是多少
- 将内联SVG转换为Base64字符串
- 如何在 JavaScript 中将文件转换为 base64
- 将图像从 base64 转换为图像并保存在 Django 的数据库中
- 如何使用 javascript 将 png 转换为 base64 字符串
- 如何将 Base64 文件转换为 javascript 中的实际文件/原始文件并将其下载到客户端
- 如何将 Base64 字符串转换为 javascript 文件对象,就像从文件输入表单一样
- 将base64转换为AngularJS中的图像文件
- 将 base64 编码的字节转换为在 Javascript 和 C# 中不同的字符串
- 设置& lt; img>用Javascript转换base64编码的图像失败
- 使用webcam.js转换base64图像时,我得到了损坏的图像