在 JavaScript 中将图像十六进制转换为 base64答案

【问题标题】：Converting Image Hex to base64 in JavaScript在 JavaScript 中将图像十六进制转换为 base64
【发布时间】：2019-03-08 03:09:36
【问题描述】：

我正在寻找一种将十六进制图像（例如十六进制格式的 jpg）转换回 base64 以便在网页中显示图像的方法。

我一直在为较小的图像使用下面的代码，但对于较大的图像，它会失败，并出现最大调用堆栈超出错误。

src下面是十六进制格式的图片来源。

test.img = new Image();
test.img.src = "data:image/jpg; base64," + hexToBase64(src);

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

【问题讨论】：

related
它是十六进制字符串格式有什么原因吗？当您大部分时间只使用 Blob、File 或 ArrayBuffer (TypedArray) 对象时，这似乎很奇怪。但是“超出最大调用堆栈”消息往往来自失控的递归函数，我在这里没有看到。
这正是我得到的。 src 的格式是一个带有各种字符标记的标题，然后是数据。例如，标题的前 4 个字符是 3238，转换为 28。28 是接下来要处理的字符数，其中包含文件名，在本例中为 66696e6973686c6f6f702e706e67。如果有更好的方法来处理这个，我会很感激学习它。格式正是我得到的

标签： javascript image base64 hex converters

【解决方案1】：

使用来自Function.prototype 的apply 方法将十六进制字符串转换为数组并将其作为参数数组提供给String.fromCharCode()，从而生成超出最大调用堆栈错误。

how many arguments can be passed in JavaScript function calls 存在实际限制，因此该方法适用于小文件，但不适用于大文件。

重构代码是必要的。作为未经测试的基本解决方案

function hexToBase64(str) {
    var bString = "";
    for( var i = 0; i < str.length; i +=2) {
         bString += String.fromCharCode( parseInt( str.substr( i, 2), 16));
    }
    return btoa(bString);
}

可能会提供一些想法。

【讨论】：

谢谢！我会试一试并报告