使用 putImageData() 和 UInt8ClampedArray 从 HTML5 Canvas 中的 3D 数组渲染 1 个像素答案

【问题标题】：Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray使用 putImageData() 和 UInt8ClampedArray 从 HTML5 Canvas 中的 3D 数组渲染 1 个像素
【发布时间】：2019-01-31 17:16:14
【问题描述】：

我尽力在 HTML5 Canvas 中仅渲染 1 个像素的 3D 数组，但未成功。

（我知道这已经完成了，但没有使用 3D 阵列）。但是将 3D 数组转换为 Uint8ClampedArray 并推送到 Uint8ClampedArray 并不容易。

HTML5 也没有其他方式来显示像素可操作的图像。

putImageData() 用于渲染垂直像素串是否正确？

这是我的代码，问题标记为：“我必须在这里做什么”：

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>
      Index.html
    </title>
  </head>
  <body style="margin: 0px; padding: 0px;">
    <canvas id="canvas">
    </canvas>
    <script>
      let a = new Array();
      a.push([]);
      a[x.length - 1].push([]);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(255);
      document.getElementById("canvas").getContext("2d").putImageData(new 
      ImageData(new Uint8ClampedArray("WHAT DO I GOTTA DO HERE"), 1, 1), 1, 
      1);
    </script>
  </body>    
</html>

要测试它，您可以使用：

console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);

【问题讨论】：

标签： javascript html5-canvas array-push putimagedata uint8array

【解决方案1】：

您已经创建了一个普通的 Javascript 数组 - 您只需要将它转换为一个固定数组。在我的脑海中，类似于：

document.getElementById("canvas").getContext("2d").putImageData(new 
  ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);

（或者将数据写入新的 Uint8ClampedArray）

【讨论】：

感谢您的回答！我会立即检查的！哦不，又报这个错误：Uncaught DOMException: Failed to construction 'ImageData': The input data length is not equal to (4 * width * height) -，我试试看。
非常感谢！你真的帮了我大忙！当我这样做时，它似乎有效： ImageData(Uint8ClampedArray.from( [ x[0][0][0], x[0][0][1], x[0][0][2] , x[0][0][3], ]), 1, 1), 1, 1);这是因为我为 RGBA 值创建了一个单独的维度。

【解决方案2】：

在画布上绘制 200 x 200 的红色块。需要<canvas></canvas>

我建议不要使用 3D 数组，因为它看起来不必要地复杂

const width = 200;
const height = 200;

const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const destData = new ImageData(width, height);
const dData = destData.data;

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const o = 4 * (y * width + x);
    dData[o] = 255; // R
    dData[o + 1] = 0; // G
    dData[o + 2] = 0; // B
    dData[o + 3] = 255; // A
  }
}

context.putImageData(destData, 0, 0);

【讨论】：

我已经用 while(x.length
感谢您的建议，但是对于我的人脑而言，仅在宽度上适应每个变量乘以 4 并不容易。想象一个 800 像素宽但只有 200 像素高的显示器。想象一下，如果显示器不仅有 RGB，还有黄色、青色和紫色。
哦，我明白了，你可以把数组变量放在 new ImageData().data[] 中，谢谢，你对我很有帮助！
那么，putImageData 用于渲染垂直的像素串（最终是多个像素），我理解了吗？
putImageData 最后将你所做的事情绘制到画布上

【解决方案3】：

我有解决方案并且它有效，我想发帖为 Stack Overflow 社区做出贡献，所以下一个有这个问题的人可以很容易地自己解决。

就像上面一样，它是一个简化版本：

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>
      Google Chrome, I suppose
    </title>
  </head>
  <body style="background-color: black; margin: 0px; margin-bottom: 0px; padding: 0px;">
    <canvas style="image-rendering: pixelated" id="canvas">
    </canvas>
    <script>
      var t =
      [
        240,
        128
      ];
      document.getElementById('canvas').width = t[0];
      document.getElementById('canvas').height = t[1];
      var a = new Array()
      {
        a.push([]);
        a[a.length - 1].push([]);
        a[a.length - 1][a[a.length - 1].length - 1].push(127, 127, 127, 255);
      }
      var i = 0;
      document.getElementById('canvas').getContext('2d').putImageData(new ImageData(Uint8ClampedArray.from
      (
        [].concat.apply
        ([],
          a[i]
        )
      ), 1), i, 0);
      i = i + 1;
      i = 0;
    </script>
  </body>
</html>

如您所见，我已将变量 x 替换为 a。

我希望这也可以帮助其他人，谢谢大家的建议！

【讨论】：