原始图像的十六进制字符串转换为JavaScript中的位图图像 [英] Converting a hex string of a raw image to a bitmap image in JavaScript
问题描述
简介
我读从智能卡指纹图像数据，正如你知道这个数据保存为智能卡的原始图像。
我正在开发一个客户端程序，它只能使用Java脚本从读卡器扫描仪读取的图像，并显示在客户端页面。
I am reading image data of fingerprints from smart card and as you know this data save as raw image in smart card. I am developing a client side program which only use java script to read image from scanner of a card reader and show that in the client page.
现在我的问题：
我如何十六进制我的原始数据的字符串转换为它与位图图像的适当的头完成了十六进制字符串？请注意，我有宽度和高度我的形象。
How can I convert hex string of my raw data to a hex string which accomplished with appropriate header of bitmap image? Note that I have width and height of my image.
试过的方法：
我已经被<发达的这一计划在java中href=\"http://stackoverflow.com/questions/10720212/get-buffered-image-from-byte-array-of-raw-data/11105035?noredirect=1#comment57540965_11105035\">get从原始数据的缓冲图像。另外，我可以通过<一个位图图像的十六进制字符串转换为base64 href=\"http://stackoverflow.com/questions/23190056/hex-to-base64-converter-for-javascript\">Hex2Base64然后我可以显示由 base64AsImage 图像标记的base64字符串。然而，这些职能运转良好;当且仅当六角包含头，而我们的数据是原始的。
I have been developed this program in java by get buffered image from raw data. Also, I could convert a hex string of a bit map image to base64 by Hex2Base64 and then I could show base64 string in an image tag by base64AsImage. However these functions work well if and only if the hex contains header, while our data is raw.
我的code（仅适用于十六进制字符串，其中包含头）：
<!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>
code 的一部分解决的问题在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;
}
注意，因为没有的BufferedImage 在JavaScript中类型，我们不能等同这种方法在JavaScript中。
Notice that, as there is not BufferedImage type in JavaScript, we could not equivalent this approach in JavaScript.
推荐答案
在你的 window.atob 方法，你正在建设的8位整数数组字符串已经（这就是斌[长度] 正在创建）刚刚返回而不是字符串数组。
In your window.atob method, you are building a string from an array of 8-bit integers already (that's what bin[length] is creating.) Just return that array instead of the string.
然后，如果你必须支持旧的浏览器，你将需要单独写每个像素的画布。但是，如果你可以针对现代浏览器，只是建立一个 Uint8ClampedArray ，它放入一个的ImageData 对象和 putImageData（）到画布上。
Then, if you have to support older browsers, you will need to write each pixel to the canvas individually. But if you can target modern browsers, just build a Uint8ClampedArray, put that into an ImageData object, and putImageData() into the canvas.
下面是一些工作示例code。我用填充随机字节（数据）的虚拟阵列，但你会使用的字节数组从 ATOB 返回
Below is some working sample code. I'm populating a dummy array with random bytes (data), but you would use the byte array returned from 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);
这篇关于原始图像的十六进制字符串转换为JavaScript中的位图图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
