Javascript convert byte string to a image

Question

I have this string in javascript that represents an image, I'm trying to convert it to a image object to show it in the html but I'm not sure how to do it, also i dont know the encoding, i think its just plain bytes?

"b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x01,\x00\x00\x00\xa8\x08\x03\x00\x00\x00m\xf5#=\x00\x00\x02OPLTE\xff\xff\xff$\xa5\xde\xf0\xed\x00(7\x92\x00\x00\x00\xfd\xf0\x0b\x0c\xa1\xdc\xbb\xe0\xf0%\xa8\xe2(7\x94\xf3\xef\x00#\xa5\xdf\xa8\xad\xcf\xf8\xf2\x00\xfc\xff\xff\x14(\x8dkx6\x00u\xab\xa8\xa8\xa8\xd2\xcc\x00\xa9\xaa\xb0\xe6\x00\x00\x00\x00\x06\xe8\xe7\xe6).K\x00\x0cI\x1d*l\x9b\x9d\x9d\x1d/\x92\xff\xf5\x00\xf0\x00\x00\x00\x00N\x1f)i\x00\x00H\x00\x00A\x00\x00;\xf1\xf1\xf1\x00\x00P\xff\xf8\x00\xe9\xf8\xf9\x08\x86\xbf\xb6\xb5\x00\x00\x00->>>{{{\x00\x00D\x00\x00V\xd7\xd7\xd5\xf6\xdc\xe0 \x97\xd1\xea\xe6\x00\xa2\x9d\x00\xd6\xcf\x00\xe4\x1d(\x00\x17h\xcd\xcd\xca\x11\x11\x11\xc8\xc2\x00\xe6\xdc\x00\x94\x93\x91\x1c,\x84\x00\rU\xcb\xce\xcf\xf6\xd0\xd5\xf2\xc2\xc5\xf1\xb1\xb8\xef\x91\x9b\xe1\xdd\xe3 Zv:c\x17m\x8e\xe3\x00\x13\xe45=\x00\x00(JJJ\x1e\x1e\x1eK\x9d\xbf\ ... xbd\xcd\x88\x00\x00\x00\x00IEND\xaeB`\x82'"

is that base64? it looks like base64 encoding... raw bytes would be 1's and 0's this looks like a compression... likely base64. — altruios

ktscript ktscript · Accepted Answer · 2020-09-24T16:53:31

try to convert base64/URLEncoded with this code, and then issue a blob in canvas:

function dataURItoBlob (dataURI) {
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {type:mimeString});
}

Javascript convert byte string to a image

1 Answers