首页 > 解决方案 > Javascript将字节字符串转换为图像

问题描述

我在 javascript 中有代表图像的字符串,我正在尝试将其转换为图像对象以在 html 中显示它,但我不知道该怎么做,我也不知道编码,我认为它只是纯字节?

"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'"

标签: javascriptstringimagebyte

解决方案


尝试使用此代码转换 base64/URLEncoded,然后在画布中发出一个 blob:

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});
}

推荐阅读