var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var uInt8Array = new Uint8Array(this.response); var byte3 = uInt8Array[4]; var bb = new WebKitBlobBuilder(); bb.append(xhr.response); var blob = bb.getBlob('image/png'); var base64 = window.btoa(blob); alert(base64); } }; xhr.send();
基本上,我在这里尝试做的是检索图像并将其转换为base64。
通过阅读此处的评论,它指出:
“当然。在将资源作为ArrayBuffer提取后,从中创建一个blob。一旦有了它,就可以直接对base / blob window.btoa()或进行base64编码 FileReader.readAsDataURL()。”
window.btoa()
FileReader.readAsDataURL()
但是,blob只是[object blob],而我需要从图像中获取二进制文件,以便可以将其转换为base64并使用数据将其显示在img标签中。
blob
[object blob]
有人知道如何实现这一目标吗?
先感谢您!
不要在Chrome中使用BlobBuilder(在OSX Chrome,Firefox 12,Safari 6,iOS Chrome,iOS Safari中测试过):
var xhr = new XMLHttpRequest(); xhr.open('GET', 'doodle.png', true); xhr.responseType = 'arraybuffer'; // Process the response when the request is ready. xhr.onload = function(e) { if (this.status == 200) { // Create a binary string from the returned data, then encode it as a data URL. var uInt8Array = new Uint8Array(this.response); var i = uInt8Array.length; var binaryString = new Array(i); while (i--) { binaryString[i] = String.fromCharCode(uInt8Array[i]); } var data = binaryString.join(''); var base64 = window.btoa(data); document.getElementById("myImage").src="data:image/png;base64," + base64; } }; xhr.send();
注意 : 此代码已超过7年的历史了。 尽管它仍然可以在大多数浏览器中正常运行,但这是基于@TypeError的建议的更新版本,该建议仅适用于更现代的浏览器 ,但iOS Safari可能会例外 (可能支持或可能不支持responseType = 'blob'-请确保进行测试!):
responseType = 'blob'
var xhr = new XMLHttpRequest(); xhr.open('get', 'doodle.png', true); // Load the data directly as a Blob. xhr.responseType = 'blob'; xhr.onload = () => { document.querySelector('#myimage').src = URL.createObjectURL(this.response); }; xhr.send();