将字节转换为用于在HTML5画布上绘制的图像

Converting bytes to an image for drawing on a HTML5 canvas

本文关键字：绘制 图像 HTML5 转换 字节 用于      更新时间：2023-09-26

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

有人知道我会怎么做吗？谢谢你的帮助。：）

我最终使用了这个：

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

如果您的图像实际上已经是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，你可以使用互联网上的一个多重转换功能（好的一个，如果你感兴趣，它还可以提供多个浏览器中性能的统计数据：）

相关文章：