将字节转换为图像以便在HTML5画布上绘图

Question

任何人都知道如何转换通过websocket(从C#应用程序)发送到图像的字节？然后我想在画布上绘制图像.我可以看到两种方法:

• 以某种方式在画布上以字节形式绘制图像而不转换它.
• 在javascript中以某种方式将字节转换为base64字符串然后绘制.

这是我的函数,它接收绘图的字节:

function draw(imgData) {

    var img=new Image();
    img.onload = function() {
        cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

// What I was using before...
img.src = "data:image/jpeg;base64,"+imgData;

}

我之前收到的图像已经转换为base64字符串了,但是在得知发送字节的尺寸较小(小30%？)后,我宁愿让它工作.我还应该提到图像是一个jpeg.

谁知道我会怎么做？谢谢您的帮助.:)

Answer 1

我最后用的是这个：

function draw(imgData, frameCount) {
    var r = new FileReader();
    r.readAsBinaryString(imgData);
    r.onload = function(){ 
        var img=new Image();
        img.onload = function() {
            cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        img.src = "data:image/jpeg;base64,"+window.btoa(r.result);
    };
}

在使用 btoa() 之前，我需要将字节读入字符串。