将字节转换为图像以在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格式。

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

- Joey Morani

---

不确定是否正确，但您可以尝试去掉;base64和对imgData进行转义。 - Malk

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

- Joey Morani

---

你好，imgData的格式是什么？它是一个字节数组吗？还是Blob？我通过Websockets发送了一个PNG图像的字节数组，但无法使其正常工作。 - Ben

嘿，我记不太清了，但我相当确定我在这里正在处理一个Blob。你试过我上面的答案了吗？我想我需要使用FileReader API来读取Blob，这就是为什么其他答案对我没有用的原因。 :) - Joey Morani

Answer 2

如果您的图像已经是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浏览器，您可以使用互联网上提供的多个转换函数之一（一个好的），它还提供了多个浏览器性能统计数据（如果您感兴趣的话:)）。请注意保留HTML标记。

- tomsmeding