在 JavaScript 中将原始图像的十六进制字符串转换为位图图像

Converting a hex string of a raw image to a bitmap image in JavaScript

本文关键字：图像 字符串 转换 位图 十六进制 原始 JavaScript      更新时间：2023-09-26

简介：

我正在从智能卡读取指纹的图像数据，如您所知，这些数据在智能卡中保存为原始图像。我正在开发一个客户端程序，该程序仅使用java脚本从读卡器的扫描仪中读取图像并在客户端页面中显示。

现在我的问题：

如何将原始数据的十六进制字符串转换为使用适当的位图图像标题完成的十六进制字符串？请注意，我有width和height我的图像。

尝试的方法：

我已经通过从原始数据中获取缓冲图像在java中开发了这个程序。此外，我可以通过 Hex2Base64 将位图图像的十六进制字符串转换为 base64，然后我可以通过 base64AsImage 在图像标签中显示 base64 字符串。但是，当且仅当十六进制包含标头时，这些函数才能很好地工作，而我们的数据是原始的。

我的代码（仅适用于包含标头的十六进制字符串）： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        if (!window.atob) {
            var tableStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
            var table = tableStr.split("");
            window.atob = function (base64) {
                if (/(=[^=]+|={3,})$/.test(base64)) throw new Error("String contains an invalid character");
                base64 = base64.replace(/=/g, "");
                var n = base64.length & 3;
                if (n === 1) throw new Error("String contains an invalid character");
                for (var i = 0, j = 0, len = base64.length / 4, bin = []; i < len; ++i) {
                    var a = tableStr.indexOf(base64[j++] || "A"), b = tableStr.indexOf(base64[j++] || "A");
                    var c = tableStr.indexOf(base64[j++] || "A"), d = tableStr.indexOf(base64[j++] || "A");
                    if ((a | b | c | d) < 0) throw new Error("String contains an invalid character");
                    bin[bin.length] = ((a << 2) | (b >> 4)) & 255;
                    bin[bin.length] = ((b << 4) | (c >> 2)) & 255;
                    bin[bin.length] = ((c << 6) | d) & 255;
                };
                return String.fromCharCode.apply(null, bin).substr(0, bin.length + n - 4);
            };
            window.btoa = function (bin) {
                for (var i = 0, j = 0, len = bin.length / 3, base64 = []; i < len; ++i) {
                    var a = bin.charCodeAt(j++), b = bin.charCodeAt(j++), c = bin.charCodeAt(j++);
                    if ((a | b | c) > 255) throw new Error("String contains an invalid character");
                    base64[base64.length] = table[a >> 2] + table[((a << 4) & 63) | (b >> 4)] +
                    (isNaN(b) ? "=" : table[((b << 2) & 63) | (c >> 6)]) +
                    (isNaN(b + c) ? "=" : table[c & 63]);
                }
                return base64.join("");
            };
        }
        function hexToBase64(str) {
            return btoa(String.fromCharCode.apply(null,
                            str.replace(/'r|'n/g, "").replace(/(['da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))
            );
        }
        function base64ToHex(str) {
            for (var i = 0, bin = atob(str.replace(/[ 'r'n]+$/, "")), hex = []; i < bin.length; ++i) {
                var tmp = bin.charCodeAt(i).toString(16);
                if (tmp.length === 1) tmp = "0" + tmp;
                hex[hex.length] = tmp;
            }
            return hex.join(" ");
        }
        function doConvert() {
            var myHex =  document.getElementById('myText').value;
            var myBase64 = hexToBase64(myHex);
            document.getElementById('myImage').src = "data:image/bmp;base64," +  myBase64;
        }
    </script>

</head>
<body>
<div>
    <p>
        Enter Raw Hex:
        <br>
        <textarea rows="4" cols="50" id="myText">Enter Raw Hex String here ...</textarea>
        <br>
        <button id="myButton" onclick="doConvert()"> Click me </button>
        <br>
        <img id="myImage" alt="img1"/>
    </p>
</div>
</body>
</html>

在Java中解决问题的代码的一部分：

private static BufferedImage byte2Buffered(byte[] rawData, int width, int height){
    BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_BYTE_GRAY);
    byte[] array = ((DataBufferByte)image.getRaster().getDataBuffer()).getData();
    System.arraycopy(rawData, 0, array, 0, rawData.length);
    return image;
}

请注意，由于 JavaScript 中没有BufferedImage类型，我们无法在 JavaScript 中等效此方法。

在 window.atob 方法中，您已经从 8 位整数数组构建了一个字符串（这就是bin[length]正在创建的内容。只需返回该数组而不是字符串。

然后，如果您必须支持较旧的浏览器，则需要将每个像素单独写入画布。但是，如果您可以针对现代浏览器，只需构建一个Uint8ClampedArray，将其放入ImageData对象中，然后putImageData()画布。

下面是一些工作示例代码。我正在用随机字节（data）填充一个虚拟数组，但你会使用从atob返回的字节数组。

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
  width = canvas.width,
  height = canvas.height,
  pixelLength = width * height,
  data,
  imageData;
// You can use any kind of array, including a
// Uint8ClampedArray, since it is just going to be
// crammed into a clamped array anyway. I'm using a
// Uint8Array just as an example.
data = new Uint8Array(pixelLength);
// Create an array of random data
data = data.map(function (btye) { return Math.floor(Math.random() * 256); });
// The source data is 8-bit grayscale, but it needs 
// to be 32-bit RGBA in a Uint8ClampedArray. The
// structure is simple. For every byte of the gray-
// scale array, write out three copies of that byte 
// and then `256` as 100% opaque.
data = data.reduce(function (carry, current, index) {
    var baseIndex = index * 4;
  carry[baseIndex] = current;
    carry[baseIndex + 1] = current;
    carry[baseIndex + 2] = current;
    carry[baseIndex + 3] = 256;
return carry;
}, new Uint8ClampedArray(pixelLength * 4));
// The Uint8ClampedArray can now be used to build the image
imageData = new ImageData(data, width, height);
ctx.putImageData(imageData, 0, 0);
相关文章：