8

任何人都知道我将如何将通过 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。

有人知道我会怎么做吗？谢谢您的帮助。:)

4

2 回答 2

4

如果您的图像确实已经是 jpeg，您可以将接收到的数据转换为 base64 流。Firefox 和 Webkit 浏览器（我记得）有一定的功能，btoa(). 它将输入字符串转换为 base64 编码的字符串。它的对应物是atob()相反的。

你可以像下面这样使用它：

function draw(imgData){
    var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands for
    var img = new Image();
    img.src = "data:image/jpeg;base64," + b64imgData;
    document.body.appendChild(img); //or append it to something else, just an example
}

如果您的目标浏览器（例如 IE）不是 Firefox 或 Webkit，您可以使用互联网上的多种转换功能之一（很好，它还提供多个浏览器中的性能统计信息，如果您重新感兴趣:)

于 2012-08-20T18:23:45.950 回答
4

我最后使用了这个：

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() 之前，我需要将字节读入字符串。

于 2012-08-27T12:58:32.053 回答