Blob from UTF-16

Question

I'm trying to get a blob for UTF-16 (I think). Here's the code. I'm not including the full string because it is too long.

  const creatBlobUrl = (str) => {
  console.log(str) 
 //?PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\b$\u0000\u0000\u00016\b\u0006\u0000\u0000\u0000???\u0000\u0000\fliCCPICC Profile\u0000\u0000H??W\u0007XS?\u0016?[????\u0002?H\t?\tҫ?\u0010Z\u0004\u0001????\u0004\u0012J?\tAņ????E\u0014+?*??Z\u0000YT?^\u0016??\u0017\u000b*+?bAQTބ\u0004t?W?w?o?̙??;s?\u001d\u00004{?\u0012I.?\u0005@?8_\u001a\u001f\u0011?\u001c???$u\u0000\u0002 \u0001\n0\u0006\b?'????\u0001?????&@\u0014?5'\u0005??????\u00052\u001e\u0000?x?3?2^\u001e??\u0000?\u001bx\u0012i>\u0000D??rj?D?? ֕?\u0000!^??YJ?K?3??i?&1?\r?\u0015\u0000Ԩ\\?4\u000b\u0000??P?,?eA\u001e??\u0010???\"1\u0000??!\u000e?\t?|?\u0015?\u000f?˛??\u0015\u0010?A{\t?0\u001e??\u001dg??3???ܬ!??k@?BE2I.w??Y??-y??A\u001f6?Q???xE????s&G)0\u0015?.qFL???\u0010???ʺ\u0003?R???$?=j̓?a?" 
    const blob = new Blob([str], {
      type: 'image/png',
    });

    return URL.createObjectURL(blob);
  };

First of all, is this even UTF-16. Second what am I doing wrong? BTW, my goal is to pass this url into an anchor tag

I tried doing to new Blob([atob(str)]) thing, but that didn't work either. — Eric Grossman, Jun 11 '21 at 00:12
Does this answer your question? [Blob URL with UTF-16LE encoding](https://stackoverflow.com/questions/27318715/blob-url-with-utf-16le-encoding) — thshea, Jun 11 '21 at 00:17
It's not even a PNG, this is the **result** of reading the binary data of a PNG file as UTF-8 text. You already lost information in a way it can't be retrieved. For instance, the first byte is now 0x3f (?), while it was 0x89. This is because this byte is not part of UTF-8, and it got mapped to a replacement character. A lot of such bytes may appear in your png data: it's already corrupted. You need to go a few steps back, when whatever did create that string, and making it return directly a Blob instead of a string. Without knowing what did generate that string, we can't help more. — Kaiido, Jun 11 '21 at 01:20
Where are you seeing 0x3f in the string? Is that equal to u0001a? — Eric Grossman, Jun 11 '21 at 02:04
The character `?` in UTF8 (and many other encodings based on ASCII) is the byte 0x3f. `\u001a` is 0x1a, and this one is correct at this position. — Kaiido, Jun 11 '21 at 03:24

score 0 · Answer 1 · answered Jun 12 '21 at 05:23

0

Figured it out. @Kaiido you were right. I was in fact losing data over http. I had to encode the data to base64 on the backend before I sent it over http, and then decode it on the front end with something like: https://stackoverflow.com/a/35713609/11477406

answered Jun 12 '21 at 05:23

Eric Grossman

219
1
4
9

1

No, you don't have to send the data as data URL, you just have to consume it as binary (either blob or arraybuffer) instead of consuming it as UTF8 text. But since you don't show how you do consume that response we can't help you do so. And if you really are just going to use that response to generate a blob:// URI with the goal of setting it as the `href` of an , then don't even fetch that resource, set the `href` directly to the URL you are currently fetching. – Kaiido Jun 12 '21 at 05:38
For some reason if I sent the data without encoding it first I lost some data..probably because some kind of http limit. – Eric Grossman Jun 13 '21 at 06:41
1

HTTP can obviously send binary data without a problem, otherwise we couldn't have images or videos of cats playing piano on the Internet. You probably did something wrong, either at sending (I doubt it, but it's possible), or at consuming, like I'm telling you for more than 2 days now. Why don't you simply edit your question to show how you are consuming that response? That would be so much easier to help you... – Kaiido Jun 13 '21 at 10:25
I don't totally understand what you mean. In the question I state that this will be an anchor href. The ?PNG binary string is coming from the server. But when sent without base64 encoding on the backend first, it starts with ?PNG. If encoded, sent over http, and then decoded on the front end I get the correct binary string...which starts with something like 89xPNG. – Eric Grossman Jun 14 '21 at 12:48
No, in your question you shown that you already have a string ("?PNG...") and that you are building a Blob from that string and trying to download that Blob through an . What I'm asking you for now 3 days is to show us how you got that string to begin with. To be honest, I've got a pretty clear idea of how you got it: you fetched that resource through AJAX (either through XHR or fetch(), or some wrapper like $.get or axios etc.) and you consumed it as an UTF-8 text (either because you didn't set the `responseType` of XHR, or you used Response.text() or whatever). – Kaiido Jun 14 '21 at 14:10
What I want you to do is to show us that part of the code you keep hidden for now three days. If you want us to help you, you need to show that. But as I said originally, you might even just need to set the `href` of your directly to the URL you fetched from (the one you passed to XHR.open or fetch() or whatever). – Kaiido Jun 14 '21 at 14:10
@Kaido this is in a react component. Pretty basic implementation. Sorry ahead of time for the formatting. I couldn't figure it out for comments. `const [img,setImg] = useState()` `useEffect(()=>{ (async()=>{ const {data} = await axios.get('/img') setImg(data.img) })() },[])` `return link` – Eric Grossman Jun 15 '21 at 03:59
Edit your question please... And once again, you can probably just do ``, and if you really need to go through axios, then check [their docs](https://github.com/axios/axios#request-config) on how to fetch as Blob directly (`responseType: "blob"`.) – Kaiido Jun 15 '21 at 04:27

Blob from UTF-16

1 Answers1