使用JavaScript显示Blob
Using JavaScript to display a Blob
我正在从数据库中检索Blob图像,我希望能够使用JavaScript查看该图像。下面的代码在页面上生成一个破碎的图像图标:
var image = document.createElement('image');
image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
document.body.appendChild(image);
下面是一个jsFiddle,它包含了所有必需的代码,包括blob。完成后的代码应该能正确显示图像。
也可以直接从XMLHttpRequest获取BLOB对象。将responseType设置为blob就可以了。下面是我的代码:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();
响应函数是这样的:
function response(e) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
document.querySelector("#image").src = imageUrl;
}
我们只需要在HTML中创建一个空的image元素:
<img id="image"/>
如果您想使用fetch:
var myImage = document.querySelector('img');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
源:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 你可以将字符串转换为Uint8Array来获取原始数据。然后为该数据创建Blob并传递给URL. createobjecturl (Blob)以将Blob转换为传递给img.src的URL。
var data = '424D5E070000000000003E00000028000000EF...';
// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);
for (var i = 0; i < data.length; i += 2) {
bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}
// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});
// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);
您可以尝试完整的示例:http://jsfiddle.net/nj82y73d/
在您的示例中,您应该createElement('img')
.
在你的链接中,base64blob != Base64.encode(blob)
。
这个工作,只要你的数据是有效的http://jsfiddle.net/SXFwP/(我没有任何BMP图像,所以我不得不使用PNG)。
我猜你在图像的内联代码中有错误。试试这个:
var image = document.createElement('img');
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
image.width=100;
image.height=100;
image.alt="here should be some image";
document.body.appendChild(image);
帮助链接:http://dean.edwards.name/my/base64-ie.html
在这里您的blob不是blob,它是十六进制数据的字符串表示形式。在blob上试试这个,你就完成了
var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
let contents=reader.result
image.src = contents
document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)
readAsDataURL给你一个base64编码的图像为您准备图像元素()源(src)
问题是我有十六进制数据,需要在base64编码之前转换为二进制。
PHP:base64_encode(pack("H*", $subvalue))
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 在IE中显示iframe中的blob失败
- 使用 JavaScript 和 websocket 显示来自 blob 的图像
- 将文件读取到 blob 并以 JavaScript 格式显示
- 在信息窗口谷歌地图上显示BLOB数据中的图像
- 通过AJAX读取后显示视频blob
- 检索作为blob存储在数据库中的图片,并将其显示在html中
- 我如何用Node发送视频到客户端JavaScript blob,然后显示它
- 使用JavaScript显示Blob
- 如何在iOS上显示从我的angularjs应用发送的PDF (Blob)
- 使用Blob时显示错误
- Django post请求没有在终端显示javascript blob对象
- 如果调用revokeObjectURL,Blob图像将不会在Chrome中显示
- extjs4:显示Mysql blob值中的图像
- 显示来自Blob Javascript的视频