[英]Convert Blob to binary string synchronously
当用户复制画布选择时,我正在尝试将图像放入剪贴板:
所以我认为正确的方法是将canvas tu dataURL,dataURL转换为blob和blob转换为二进制字符串。
理论上应该可以跳过blob,但我不知道为什么。
所以这就是我做的:
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);
但是当在paste
事件线程之外使用DataTransfer
对象时, setData
不再有任何生效的机会。
如何在同一个函数线程中进行转换?
这是一种从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]
你应该考虑让它保持异步但是让它成为两个阶段,因为你最终可能会锁定浏览器。
此外,您可以通过包含二进制安全的Base64解码器完全跳过Blob ,您可能不需要通过Base64 AND Blob ,只需其中一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.