Javascript 不带base64的图像到数据uri

我将图像作为base64数据URI，但希望将其转换为不带base64的数据URI（在我的情况下，图像大小无关紧要）-如何实现？这就是我目前所尝试的

“AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",； 设imgStr=atob（imgB64）；//将base 64解码为str 让bytes=Uint8Array.from（imgStr，c=>c.charCodeAt（0））；//字符串到字节 picB64.src='data:image；base64，“+imgB64//这很有效 pic.src='data:image；text/plain，“+encodeURIComponent（字节）；//这不起作用：（

这很有效
这不起作用

不幸的是，数据uri的内容是文本或base64编码的二进制数据

来自MDN

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

数据：[；base64]，

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

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

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

更新

看起来您遇到了一个“解决方法”，尽管这允许您在数据uri中使用url编码的文本，但它甚至比base64编码更大

Base 64将二进制数据上的3个字节编码为4个字节的ASCII。这将导致（大约）33%的大小增加。URL编码单个字节将导致3个字符的大小增加200%

---

不过，大小的增加正是您试图避免的。

在不使用base64编码的情况下渲染图像绝对是可能的

这是：

//将字节数组转换为十六进制的函数
函数到十六进制字符串（byteArray）{
返回数组.from（字节数组，函数（字节））{
返回（'0'+（字节和0xFF）.toString（16））.slice（-2）；
}).join（“%”）
}
//base64中的图像
var imgB64=“qk3kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaap///wD///f/4///B/+P/tv/j/nc/4/n3z+P39/fjx+px45uuuuuujddz8h3vd/wd73f8He93/bvn/wx78f8v8d+f3/BOZz/wdfr/8Hv9///B7+f/we+X/8Hvd/B73f/we93/8GTd/f4/funiqp4+6lwjjjjjjf395f89/f4/”；
//base64到字符串
var imgStr=atob（imgB64）；
//生成字节数组
var bytes=Uint8Array.from（imgStr，c=>c.charCodeAt（0））；
//将输入数组转换为十六进制数组
var hexBytes=“数据：图像，%”+toHexString（字节）；
//将图像设置为元素
document.getElementById（“pic”）.src=hexBytes；

样品

为什么不尝试将其转换为blobCan？您可以指定您的目标是什么，使您不想使用Base64数据？我需要省略Base64编码算法，以减少生成图像的程序的大小（不是JS）以减少图像输出或程序的大小？程序的大小否-这是可能的-我更新了问题（底部示例）这是一种解决方法，可以将非ascii/utf-8数据转换为3个字符。这可能比base64更糟糕，但base64的大小增加了33%，而不是近200%，这正是您不想要的。不-输出图像大小对我来说无关紧要-阅读下面问题的评论了解更多信息谢谢-这s正是我想要的：）长的一行：

pic.src=“data:image，+[…atob（imgB64）].map（x=>'%'+x.charCodeAt（0）.toString（16.padStart（2，'0'））.join`；