javascript 如何在javascript中将字节数组转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21300921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert byte array to image in javascript
提问by user2075328
I am developing a phonegap application here i got a byte array of a image form server and i want to display that byte array to image in html using javascript so can you help me to convert byte array to image format.
我正在开发一个 phonegap 应用程序，我得到了一个图像表单服务器的字节数组，我想使用 javascript 将该字节数组显示为 html 中的图像，所以你能帮我将字节数组转换为图像格式吗？
回答by Suhas
If you have the byte array first you convert it to Base64Stringand then you place it on an imgtag like that (for png image)
如果您首先拥有字节数组Base64String，则将其转换为，然后将其放置在这样的img标签上（对于 png 图像）
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
回答by Kamlesh Arya
Example code : Source
示例代码：源
<!DOCTYPE html>
<html>
<head>
<script>
function newEl(tag){return document.createElement(tag);}
window.addEventListener('load', mInit, false);
// rbgData - 3 bytes per pixel - alpha-channel data not used (or valid)
//
function createImageFromRGBdata(rgbData, width, height)
{
var mCanvas = newEl('canvas');
mCanvas.width = width;
mCanvas.height = height;
var mContext = mCanvas.getContext('2d');
var mImgData = mContext.createImageData(width, height);
var srcIndex=0, dstIndex=0, curPixelNum=0;
for (curPixelNum=0; curPixelNum<width*height; curPixelNum++)
{
mImgData.data[dstIndex] = rgbData[srcIndex]; // r
mImgData.data[dstIndex+1] = rgbData[srcIndex+1]; // g
mImgData.data[dstIndex+2] = rgbData[srcIndex+2]; // b
mImgData.data[dstIndex+3] = 255; // 255 = 0xFF - constant alpha, 100% opaque
srcIndex += 3;
dstIndex += 4;
}
mContext.putImageData(mImgData, 0, 0);
return mCanvas;
}
var rgbData = new Array(
0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff,// white,white,white, white
0xff,0xff,0xff, 0xff,0x00,0x00, 0x00,0xff,0x00, 0xff,0xff,0xff,// white, red,green, white
0xff,0xff,0xff, 0x00,0x00,0xff, 0xff,0xff,0x00, 0xff,0xff,0xff,// white, blue,yellow,white
0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff // white,white,white, white
);
function mInit()
{
// 1. - append data as a canvas element
var mCanvas = createImageFromRGBdata(rgbData, 4, 4);
mCanvas.setAttribute('style', "width:64px; height:64px; border:solid 1px black"); // make it large enough to be visible
document.body.appendChild( mCanvas );
// 2 - append data as a (saveable) image
var mImg = newEl("img");
var imgDataUrl = mCanvas.toDataURL(); // make a base64 string of the image data (the array above)
mImg.src = imgDataUrl;
mImg.setAttribute('style', "width:64px; height:64px; border:solid 1px black"); // make it large enough to be visible
document.body.appendChild(mImg);
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>
