Convert Blob to binary string synchronously

Question

I'm trying to put image in clipboard when user copies canvas selection:

canvas selection

So I thought the right way would be to convert canvas tu dataURL, dataURL to blob and blob to binary string.

Theoretically it should be possible to skip the blob, but I don't know why.

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 DataTransfer object is used out of the paste event thread the setData has no longer any chance to take effect.

How can I do the conversion in the same function thread?

parameter order in setData should be reversed -> items.setData("image/png", reader.result) — belzebu
– belzebu, Commented Jul 16, 2015 at 7:39
I have to admit that I'm really struggling to get the canvas into the clipboardData object and paste it let's say in MS Outlook message or elsewhere. Tomas, could you please outline what was your final solution to copy canvas into clipboard. I've tried nearly everything I could either using the setData("image/png"...) or items.filed.add(file) etc.. what should be the value to be passed to setData("image/url", ??) ? Thank you. — belzebu
– belzebu, Commented Jul 17, 2015 at 2:31
@belzebu Unless something changes, I have bad news. I posted question subsequent to this one and it's still not answered because it's simply not possible: stackoverflow.com/q/27262879/607407 — Tomáš Zato
– Tomáš Zato, Commented Jul 21, 2015 at 19:18

danronmoon · Accepted Answer · 2022-05-04 18:33:25Z

8

Here is a hacky-way to get you synchronously from a blob to its bytes. I'm not sure how well this works for any binary data.

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 Blobs entirely by including a binary-safe Base64 decoder, and you probably don't need to go via Base64 AND Blob, just one of them.

edited May 4, 2022 at 18:33

danronmoon

3,8735 gold badges36 silver badges58 bronze badges

answered Nov 30, 2014 at 0:09

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tomáš Zato Over a year ago

I think I'll just skip the blob phase. I'm curious though - how come that pseudo-xhr is synchronous?

Paul S. Over a year ago

@TomášZato Passed false as the third parameter of the open method. This is not considered best practice.

Martin Wantke Over a year ago

For me, this is a clever solution. But a synchronously XMLHttpRequest just accept DOMString as response. That means, bytes higher then 127 are falsified, whenever the transmitted byte array is not UTF8 compatible.

Codesmith Over a year ago

I'm pretty sure you can just use xhr.responseType="arraybuffer"; developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

Paul S. Over a year ago

@Codesmith Yep, if you only need to target IE10 or newer then that option is also valid

Daniel Stasiak · Accepted Answer · 2024-01-30 10:29:54Z

1

Blob can be converted to binary string by getting Blob as dataURI and then applying atob. This, however, again requires FileReader. In my case, it's best to skip the blob alltogether:

// Canvas to binary
var data = atob(
  _this.editor.selection.getSelectedImage()  // Canvas
  .toDataURL("image/png")                    // Base64 URI
  .split(',')[1]                             // Base64 code
);

edited Jan 30, 2024 at 10:29

Daniel Stasiak

3652 gold badges5 silver badges16 bronze badges

answered Nov 30, 2014 at 10:41

Tomáš Zato

53.9k63 gold badges316 silver badges843 bronze badges

1 Comment

Nakilon Over a year ago

Omg there are so many duplicates of this question and tons of answers and none mentions the toDataURL that is exactly what's needed.

Collectives™ on Stack Overflow

Convert Blob to binary string synchronously

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related