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

Question

我在这里开发一个phonegap应用程序，我有一个图像形式服务器的字节数组，我想使用javascript在HTML中将该字节数组显示为图像，因此您可以帮助我将字节数组转换为图像格式。

Answer 1

如果首先拥有字节数组， Base64String其转换为Base64String ，然后将其放置在像这样的img标签上（用于png图像）

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

Answer 2

示例代码：源

<!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>

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

问题描述

2 个解决方案

解决方案1
8 已采纳 2014-01-23 07:38:12

解决方案2
1 2014-01-23 06:32:26

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

问题描述

2 个解决方案

解决方案1 8 已采纳 2014-01-23 07:38:12

解决方案2 1 2014-01-23 06:32:26

解决方案1
8 已采纳 2014-01-23 07:38:12

解决方案2
1 2014-01-23 06:32:26