javascript 将 Blob 同步转换为二进制字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27208407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert Blob to binary string synchronously
提问by Tomá? Zato - Reinstate Monica
I'm trying to put image in clipboard when user copies canvas selection:
当用户复制画布选择时，我试图将图像放入剪贴板：
So I thought the right way would be to convert canvas tu dataURL, dataURL to blob and blob to binary string.
所以我认为正确的方法是将 canvas tu dataURL、dataURL 转换为 blob，将 blob 转换为二进制字符串。
Theoretically it should be possible to skip the blob, but I don't know why.
理论上应该可以跳过 blob，但我不知道为什么。
So this is what I did:
所以这就是我所做的：
function copy(event) {
console.log("copy");
console.log(event);
//Get DataTransfer object
var items = (event.clipboardData || event.originalEvent.clipboardData);
//Canvas to blob
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
//File reader to convert blob to binary string
var reader = new FileReader();
//File reader is for some reason asynchronous
reader.onloadend = function () {
items.setData(reader.result, "image/png");
}
//This starts the conversion
reader.readAsBinaryString(blob);
//Prevent default copy operation
event.preventDefault();
event.cancelBubble = true;
return false;
}
div.addEventListener('copy', copy);
But when the DataTransferobject is used out of the pasteevent thread the setDatahas no longer any chance to take effect.
但是当DataTransfer对象在paste事件线程之外使用时，它setData不再有任何机会生效。
How can I do the conversion in the same function thread?
如何在同一个函数线程中进行转换？
回答by Paul S.
Here is a hacky-way to get you synchronously from a blob to it's bytes. I'm not sure how well this works for any binary data.
这是一种让您从 blob 同步到它的字节的hacky-way。我不确定这对任何二进制数据的效果如何。
function blobToUint8Array(b) {
var uri = URL.createObjectURL(b),
xhr = new XMLHttpRequest(),
i,
ui8;
xhr.open('GET', uri, false);
xhr.send();
URL.revokeObjectURL(uri);
ui8 = new Uint8Array(xhr.response.length);
for (i = 0; i < xhr.response.length; ++i) {
ui8[i] = xhr.response.charCodeAt(i);
}
return ui8;
}
var b = new Blob(['abc'], {type: 'application/octet-stream'});
blobToUint8Array(b); // [97, 98, 99]
You should consider keeping it async but making it two-stage, though, as you may end up locking up the browser.
不过，您应该考虑保持异步但将其设置为两阶段，因为您最终可能会锁定浏览器。
Additionally, you can skip Blobsentirely by including a binary-safe Base64decoder, and you probably don't need to go via Base64AND Blob, just one of them.
此外，您可以通过包含二进制安全的Base64解码器来完全跳过Blob，并且您可能不需要通过Base64AND Blob，只需其中之一即可。
回答by Tomá? Zato - Reinstate Monica
Blob can be converted to binary string by getting Blob as dataURIand then applying atob. This, however, again [requires FileReader][3]. In my case, it's best to skip the blob alltogether:
通过获取 Blob 作为dataURI然后应用atob. 然而，这又 [需要FileReader][3]. 就我而言，最好完全跳过 blob：
//Canvas to binary
var data = atob(
_this.editor.selection.getSelectedImage() //Canvas
.toDataURL("image/png") //Base64 URI
.split(',')[1] //Base64 code
);
