javascript - 将 Blob 同步转换为二进制字符串

Question

我试图在用户复制 Canvas 选择时将图像放入剪贴板:

所以我认为正确的方法是将 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);

但是当 DataTransfer 对象在 paste 事件线程之外使用时，setData 不再有任何机会生效。

如何在同一函数线程中进行转换？

Answer 1

这是一种让您从 blob 同步到其字节的 hacky 方法。我不确定这对任何二进制数据的效果如何。

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 和 Blob，只是其中之一。