如何从 jpeg 或 png 格式的字节数组在画布上绘制图像

Posted 2023-03-05

【中文标题】如何从 jpeg 或 png 格式的字节数组在画布上绘制图像

【英文标题】：How to Draw an image on canvas from a byte array in jpeg or png format

【发布时间】：2014-02-21 10:31:00

【问题描述】：

正如标题所说，我有一个表示图像内容的字节数组（可以是 jpeg 或 png）。

我想在普通的画布对象上绘制它

<canvas id='thecanvas'></canvas>

我该怎么做？

---

更新我试过这个（不成功）： （imgData 是通过 WebSockify “按原样”作为字节数组发送到客户端的 png）

function draw(imgData) 
    "use strict";

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var rdr = new FileReader();
    var imgBlob = new Blob([imgData], type: "image/png");
    rdr.readAsBinaryString(imgBlob);

    rdr.onload = function (data) 
        console.log("Filereader success");
        var img = new Image();
        img.onload = function () 
            console.log("Image Onload");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        ;
        img.onerror = function (stuff) 
            console.log("Img Onerror:", stuff);
        ;
        img.src = "data:image/png;base64," + window.btoa(rdr.result);
    ;

我总是联系img.onerror()

另外在我的文件系统上使用 HEX 编辑器读取文件后，我可以看到字节数组与原始文件相同。

【问题讨论】：

你看到了吗：***.com/questions/12041851/… ?

@HaunsTM 不！谢谢。我正在调查那个。如果这解决了我的问题，我将删除问题

您需要告诉我们一些关于您的字节数组的格式：它是原始像素吗？在这种情况下，它们是如何排序的（RGB、RGBA、BGR 等），如果不是，是它们代表编码的图像，如果是，则使用哪种编码（Base-64，原始压缩 JPEG/PNG）？

@Ken 我确定它是一个在客户端读取并“按原样”发送的 png 文件。它通过服务器端的 WebSockify 传递（作为代理），我不确定 WebSockify 用它做什么。

在告诉浏览器您要发送 JPEG 文件之前，您要请求并编码一个 PNG 文件，是否值得一提？

【参考方案1】：

这个作品：

function draw2(imgData, coords) 
    "use strict";
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    //var uInt8Array = new Uint8Array(imgData);
    var uInt8Array = imgData;
    var i = uInt8Array.length;
    var binaryString = [i];
    while (i--) 
        binaryString[i] = String.fromCharCode(uInt8Array[i]);
    
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    var img = new Image();
    img.src = "data:image/png;base64," + base64;
    img.onload = function () 
        console.log("Image Onload");
        ctx.drawImage(img, coords[0], coords[1], canvas.width, canvas.height);
    ;
    img.onerror = function (stuff) 
        console.log("Img Onerror:", stuff);
    ;

【讨论】：

这实际上可行，但如果我想保持原始图像的比例怎么办？

完成，您可以测量图像并进行数学计算，谢谢

我从画布中删除了宽度/高度属性，并在绘制图像之前将它们设置在 onload 方法中，这将图像从 300x150 正确缩放到 640x480。最初图像仅以 300x150 显示，即使浏览器认为它是 640x480。： image.onload = function() canvas.width = image.width;画布.高度=图像.高度； context.drawImage(image,0,0, canvas.width, canvas.height);

坐标未定义？