如何在javascript中将字节数组转换为图像答案

【问题标题】：How to convert byte array to image in javascript如何在javascript中将字节数组转换为图像
【发布时间】：2014-01-23 06:27:06
【问题描述】：

我正在开发一个 phonegap 应用程序，我有一个图像表单服务器的字节数组，我想使用 javascript 将该字节数组显示为 html 中的图像，所以你能帮我将字节数组转换为图像格式吗？

【问题讨论】：

stackoverflow.com/questions/9463981/…看看这个
查看链接：codeproject.com/Questions/578560/…

标签： javascript jquery html cordova

【解决方案1】：

如果您首先拥有字节数组，则将其转换为 Base64String，然后将其放置在类似的 img 标记上（对于 png 图像）

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

【讨论】：

是的，你节省了我的时间。我一直在寻找更复杂的解决方案，如等。没有什么比这更简单。非常感谢。
@Buminda Yah 不需要感谢。如果您喜欢它，请为答案投票。
@Buminda.. 你是如何在javascript中将字节数组转换为base64
@PrannoyMittal 使用 btoa(..) developer.mozilla.org/en/docs/Web/API/WindowBase64/…

【解决方案2】：

示例代码：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>

【讨论】：