2

我有图像作为 base64 数据 URI，但想将其转换为没有 base64 的数据 URI（在我的情况下图像大小无关紧要） - 怎么做？这是我到目前为止所尝试的

let imgB64="Qk3KAAAAAAAAAD4AAAAoAAAAHQAAACMAAAABAAEAAAAAAIwAAADDDgAAww4AAAAAAAAAAAAAAAAAAP///wD//f/4//B/+P/tv/j/nc/4/n3z+P39/fjx+Px45uUzuJddz8h3vd/wd73f8He93/BvvN/wX78f8D+f3/BOZz/wdfr/8Hv9//B7+f/we+X/8Hvd//B73f/we93/8GTd/nBfUniQP4+m6L/f3tjP396489/eeP3f2fj+X9f4/5/P+P/Pv/j/8n/4//3/+A";

let imgStr=atob(imgB64);                                 // decode base 64 to str
let bytes=Uint8Array.from(imgStr, c => c.charCodeAt(0)); // string to bytes

picB64.src='data:image;base64,'+imgB64                      // this works 

pic.src='data:image;text/plain,'+encodeURIComponent(bytes); // this not work :(
<div>This works</div> <img id="picB64">

<div>This not works</div> <img id="pic">

这是显示这是可能的示例（可能部分损坏但有效） 

<img src=data:image;text/plain,BMv%0A%00%00%00%00%00%00x%00%00%00(%00%00%00%40%00%00%00%40%00%00%00%01%00%04%00%00%00%00%00%00%00%00%00%C3%84%0E%00%00%C3%84%0E%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2B%C2%81%C3%BC%00%08%1F%C3%8D%00%08Zr%00%C3%BC%C3%BA%C3%BC%00%5E%5E%5E%00%119%C2%B9%00%08%C2%93%0B%00%C2%AB%C2%AB%C2%AB%00%00%C3%BF%00%00%00%C3%BF%00%00%00%C3%BF%C3%BC%00%C3%BC%C3%BF%C2%AB%00%C2%AB%C3%BF%00%00%00%C3%BF%00%00%00%C3%BF%00%00%00%00%00%02%00%03%01%03%00%01%01%02%03%03%03%02%03%03%02%00%03%01%01%01%03%03%03%02%03%01%02%02%01%02%01%00%00%00%01%03%00%00%02%00%02%01%02%00%02%01%03%03%01%01%02%01%01%02%00%01%02%02%03%00%01%02%03%00%01%01%01%01%03%01%02%01%01%02%03%02%02%03%00%00%00%02%01%01%02%01%02%01%00%03%00%02%02%03%01%03%01%02%02%02%02%00%01%01%02%00%00%03%00%02%01%01%03%03%03%03%01%03%02%01%00%00%01%02%02%01%00%00%01%03%03%00%00%00%03%00%01%01%01%01%01%02%00%02%00%03%03%03%00%02%02%03%01%02%01%02%00%01%01%03%02%01%02%00%00%00%00%00%01%00%01%02%02%01%01%03%03%02%02%02%01%02%03%02%00%00%03%00%03%00%01%03%01%01%02%02%03%02%03%03%03%02%03%03%02%01%03%02%03%01%00%02%03%03%00%02%02%01%02%02%01%02%02%03%03%01%00%01%03%03%03%01%01%01%01%01%00%03%02%00%00%00%02%01%01%02%00%02%02%01%02%03%03%00%03%02%00%02%02%01%00%03%00%00%03%01%03%03%01%02%00%02%03%01%01%01%03%00%00%03%02%03%00%01%02%03%03%02%03%02%02%01%01%01%00%03%03%03%03%01%02%03%02%03%00%00%01%01%01%00%02%00%02%01%03%01%00%02%02%03%02%01%02%01%01%01%01%03%00%01%03%03%00%03%02%01%02%00%01%01%01%00%00%03%01%00%03%01%01%01%01%02%01%02%00%03%03%00%00%01%00%00%03%02%03%02%00%03%02%03%03%01%03%00%01%01%00%01%01%02%00%00%02%02%01%00%00%00%03%02%00%02%02%00%02%03%03%01%02%01%01%00%01%00%03%03%00%01%01%00%03%01%03%01%02%01%00%02%01%01%01%00%02%02%03%02%01%00%00%00%03%02%00%03%00%00%00%02%03%00%00%01%03%02%01%02%02%03%01%00%00%01%01%02%03%03%03%00%01%00%01%00%03%02%02%02%00%00%03%02%02%03%00%00%02%02%01%03%01%02%01%02%03%03%03%01%00%01%02%02%01%02%03%00%03%01%03%01%02%00%01%00%03%03%03%02%01%01%02%03%03%01%01%02%03%01%01%03%02%01%01%01%00%01%00%00%03%01%00%02%02%03%02%00%02%01%03%00%00%02%02%03%03%01%02%00%00%00%03%01%03%02%02%01%02%02%03%03%03%01%01%00%00%03%03%01%00%01%03%03%02%03%03%02%00%02%00%02%00%02%00%02%00%00%01%01%00%02%03%03%03%01%00%01%03%01%01%00%03%02%02%00%02%02%02%01%00%00%02%01%03%02%01%01%00%03%02%01%01%01%02%02%02%02%02%00%01%01%02%00%00%03%02%02%00%02%03%00%01%00%01%03%01%02%03%02%00%03%01%01%00%03%00%03%02%02%03%00%03%01%03%02%01%02%00%01%01%02%00%00%00%02%03%03%01%03%03%02%01%01%01%00%02%01%01%01%01%03%01%02%01%02%03%01%02%02%02%00%02%01%00%00%01%00%02%00%00%02%00%00%01%03%01%02%02%01%03%01%03%02%02%03%00%02%03%03%01%00%03%00%00%01%03%03%03%02%01%02%00%01%03%02%02%02%01%00%02%03%01%01%02%02%01%02%03%03%01%00%01%02%03%00%00%02%02%02%03%01%03%02%03%03%00%00%02%01%02%00%00%01%03%02%00%01%01%01%01%00%01%01%00%00%02%02%02%03%00%02%00%00%01%01%01%01%03%03%01%03%01%03%03%02%03%01%00%03%02%01%01%00%03%03%03%01%00%02%01%02%03%01%02%03%03%01%00%01%03%02%00%00%03%01%03%03%02%03%01%02%02%00%00%03%02%03%00%03%03%02%00%01%03%03%03%00%01%00%00%00%03%02%00%02%01%01%03%01%01%01%01%01%02%02%00%00%00%01%02%00%03%01%03%03%03%03%01%00%01%03%02%00%02%00%00%02%00%02%00%02%01%03%03%01%02%01%02%01%03%00%03%01%00%03%01%03%03%02%03%01%01%01%00%03%03%03%01%03%03%01%01%01%03%01%03%02%00%02%00%01%02%00%03%02%01%00%00%01%02%01%00%02%02%01%00%01%03%01%03%01%03%00%02%02%02%01%00%03%02%01%02%03%02%00%00%02%03%01%01%01%01%00%03%03%02%03%03%02%01%00%01%03%01%01%00%00%03%00%03%03%01%00%02%02%01%00%02%02%02%00%02%00%01%03%02%01%02%01%01%03%01%01%02%01%00%00%00%02%02%03%01%02%01%02%03%01%02%03%01%00%02%02%01%02%03%00%03%01%01%00%01%00%00%03%03%03%00%02%03%01%01%00%03%02%01%02%02%00%00%01%02%02%02%03%02%00%02%00%01%00%03%02%02%03%01%01%01%03%03%03%03%02%02%02%01%01%02%01%02%00%00%00%02%00%01%02%00%00%02%02%02%02%01%02%02%02%02%01%03%03%01%01%01%00%03%03%00%00%00%01%01%02%00%00%00%03%01%00%01%03%03%01%03%02%02%02%01%00%00%03%00%03%00%01%01%02%03%02%03%02%01%01%01%01%00%02%03%03%03%03%03%01%00%01%03%03%01%02%01%01%01%02%02%00%03%00%01%00%00%02%01%02%02%00%00%00%00%02%00%03%01%01%01%00%01%03%02%01%00%03%02%02%00%01%02%03%03%02%03%01%02%00%02%01%01%03%01%00%01%03%01%02%00%02%00%03%03%00%02%03%00%02%02%01%01%00%02%03%01%03%03%03%00%00%00%01%00%00%00%03%03%02%00%01%03%03%00%03%02%03%02%03%02%03%03%03%00%00%01%03%00%01%00%02%00%03%00%00%00%01%03%01%02%00%03%03%00%02%03%00%03%01%02%02%02%03%03%01%01%01%01%01%01%00%00%03%03%01%01%00%01%03%00%02%02%00%00%01%01%01%00%00%02%03%00%01%02%03%00%03%02%02%03%01%02%03%02%01%01%02%01%00%00%01%01%01%00%02%02%00%02%00%00%02%01%00%02%03%00%00%01%01%02%02%02%00%02%03%03%00%02%02%00%03%01%03%03%01%00%01%03%03%03%03%01%01%03%02%03%00%00%01%02%03%01%02%02%02%03%03%03%02%03%02%01%01%02%03%03%03%02%00%03%00%02%00%02%01%02%03%02%00%00%01%02%03%03%02%03%00%01%00%02%03%03%03%02%03%01%00%00%01%00%00%01%03%02%03%00%02%02%00%02%03%00%02%03%01%00%01%03%03%02%02%02%01%03%02%03%00%00%01%03%01%00%03%01%01%03%02%00%01%03%03%01%02%01%03%00%01%01%01%02%02%01%02%00%01%03%03%02%02%02%01%02%02%02%00%03%01%00%03%01%00%03%00%01%03%03%02%02%02%03%02%02%00%03%03%01%03%00%01%02%03%00%03%02%00%02%03%02%02%00%01%01%03%01%00%02%02%03%02%02%00%00%03%01%03%01%03%00%02%00%03%01%03%01%01%00%00%02%01%03%02%03%03%03%03%01%00%01%02%03%00%01%00%00%01%03%02%02%01%01%01%03%02%00%03%03%00%01%02%03%01%00%02%02%01%00%03%01%02%02%02%01%01%01%01%02%01%01%01%03%01%00%03%02%00%03%01%02%01%03%00%00%03%03%01%00%03%00%01%03%00%01%03%01%00%00%01%00%01%01%03%00%00%03%02%00%02%00%00%02%01%01%02%00%02%02%03%03%02%00%02%01%02%02%03%03%01%02%00%00%00%00%01%00%01%03%00%01%03%00%03%02%02%00%00%01%03%02%00%00%02%00%00%02%03%00%02%03%02%01%01%02%01%02%00%02%03%02%01%03%02%01%02%01%01%02%02%01%00%03%03%00%03%01%01%03%02%03%01%03%02%02%02%03%02%00%01%00%02%02%03%03%01%03%00%00%00%02%03%03%00%00%00%00%01%00%03%03%00%00%00%00%02%00%00%01%00%00%01%02%01%00%00%03%00%02%01%03%01%01%00%01%02%01%01%03%00%01%00%00%01%00%00%03%03%00%03%00%01%02%01%01%00%02%02%01%02%01%01%00%00%01%02%00%00%03%03%01%01%02%02%01%03%03%00%00%02%02%01%00%00%01%01%03%01%01%03%02%00%03%03%00%00%00%03%02%01%00%00%02%03%03%00%02%03%03%01%01%03%00%03%01%02%03%01%01%02%00%03%01%00%03%01%00%01%03%01%03%01%03%01%03%01%00%00%02%02%00%02%00%03%02%00%01%02%01%03%02%02%02%01%01%00%03%00%03%03%01%00%03%00%02%01%00%03%03%00%01%03%03%01%00%01%01%03%03%02%03%00%00%01%01%00%00%01%02%03%00%00%01%03%00%02%00%01%01%01%03%01%00%03%01%03%01%03%02%03%00%01%00%02%03%03%01%02%00%00%02%02%02%02%03%01%03%01%00%01%00%02%00%00%03%03%00%00%00%02%01%02%00%02%00%02%03%02%03%00%03%02%01%03%03%01%00%00%01%01%03%00%03%00%00%02%00 >

4

2 回答 2

2

完全可以在没有 base64 编码的情况下渲染图像。

就这个：

//function for convert byte array to hex
function toHexString(byteArray) {
  return Array.from(byteArray, function(byte) {
    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
  }).join('%')
}

//image in base64
var imgB64="Qk3KAAAAAAAAAD4AAAAoAAAAHQAAACMAAAABAAEAAAAAAIwAAADDDgAAww4AAAAAAAAAAAAAAAAAAP///wD//f/4//B/+P/tv/j/nc/4/n3z+P39/fjx+Px45uUzuJddz8h3vd/wd73f8He93/BvvN/wX78f8D+f3/BOZz/wdfr/8Hv9//B7+f/we+X/8Hvd//B73f/we93/8GTd/nBfUniQP4+m6L/f3tjP396489/eeP3f2fj+X9f4/5/P+P/Pv/j/8n/4//3/+A";

//base64 to string
var imgStr=atob(imgB64);

//make byte array
var bytes=Uint8Array.from(imgStr, c => c.charCodeAt(0));

//transform input array into hex array
var hexBytes = "data:image,%" + toHexString(bytes);

//set image to element
document.getElementById("pic").src = hexBytes;
<html>
  <head>
    <title>Sample</title>
  </head>

  <body>
    <img id="pic">
  </body>
</html>

于 2019-09-20T08:33:28.707 回答
1

不幸的是，data-uri 的内容要么是文本，要么是 base64 编码的二进制数据。

来自 MDN数据 URL

数据 URL 由四部分组成：前缀 (data:)、指示数据类型的 MIME 类型、可选的 base64 标记（如果非文本）和数据本身：

data:[<mediatype>][;base64],<data>

mediatype 是一个 MIME 类型字符串，例如 JPEG 图像文件的“image/jpeg”。如果省略，默认为 text/plain;charset=US-ASCII

如果数据是文本的，您可以简单地嵌入文本（根据封闭文档的类型使用适当的实体或转义）。否则，您可以指定 base64 以嵌入 base64 编码的二进制数据。您可以在此处和此处找到有关 MIME 类型的更多信息。

要将二进制数据与 data-uri 一起使用，需要对二进制数据进行 base64 编码。对不起

更新

似乎您遇到了“解决方法”，尽管这允许您在 data-uri 中使用 url 编码的文本，但它甚至比 base64 编码还要大。

Base 64 将二进制数据的 3 个字节编码为 4 个字节的 ASCII。导致（大约）33% 的尺寸增加。URL 编码单个字节将产生 3 个字符，从而导致大小增加 200%。

不过，这种尺寸的增加正是您要避免的。

于 2019-09-20T07:47:13.093 回答