我正在从数据库中检索Blob图像,我希望能够使用JavaScript查看该图像.以下代码在页面上生成一个损坏的图像图标:
var image = document.createElement('image');
image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
document.body.appendChild(image);
我正在尝试使用Ajax和数据URI的组合来加载JPEG图像并使用单个HTTP请求提取其EXIF数据.我正在修改一个库(https://github.com/kennydude/photosphere)来做这件事; 目前,此库使用两个HTTP请求来设置图像源并获取EXIF数据.
获得EXIF工作,没问题.但是,我很难将ajax请求中的原始数据用作图像的源.
对该技术进行小规模测试的源代码:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function init()
{
// own ajax library - using it to request a test jpg image
new Ajax().sendRequest
(
"/images/photos/badger.jpg",
{ method : "GET",
callback: function(xmlHTTP)
{
var encoded = btoa (unescape(encodeURIComponent(xmlHTTP.responseText)));
var dataURL="data:image/jpeg;base64,"+encoded;
document.getElementById("image").src = dataURL;
}
}
);
}
</script>
<script type="text/javascript" src="http://www.free-map.org.uk/0.6/js/lib/Ajax.js"></script>
</head>
<body onload='init()'>
<img id="image" alt="data url loaded image" />
</body>
</html>
我得到了看起来像发回的合理的jpeg数据,原始数据的长度(以字节为单位)和base64编码然后未编码的原始数据是相同的.但是,在Firefox(25)和Chrome(31)(当前版本)上设置图像src的尝试失败 - chrome显示"损坏的图像"图标,表明src是无效格式.
我使用这个mozilla页面获取有关base64编码/解码的信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
知道什么可能是错的吗？环顾四周我可以创建base64编码的图像服务器端,但它可以像这样在客户端完成吗？首先,base64编码服务器端显然增加了数据大小,本练习的目的是减少从服务器传输的数据量以及请求数.
谢谢,尼克
我有一些图像将显示在 React 应用程序中。我向服务器执行 GET 请求，该请求以 BLOB 格式返回图像。然后我将这些图像转换为 base64。最后，我在图像标签的 src 属性中设置这些 base64 字符串。
最近我开始使用 Fetch API。我想知道是否有办法在“一次”中进行转换。
下面是一个示例来解释我目前的想法和/或 Fetch API 是否可以实现这一点。我还没有在网上找到任何东西。
let reader = new window.FileReader();
fetch('http://localhost:3000/whatever')
.then(response => response.blob())
.then(myBlob => reader.readAsDataURL(myBlob))
.then(myBase64 => {
imagesString = myBase64
}).catch(error => {
//Lalala
})