使用putImageData（）和UInt8ClampedArray从HTML5 Canvas中的3D数组渲染1个像素
[英]Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray
问题描述
I tried my best to render just 1 pixel form a 3D Array in a HTML5 Canvas unsuccessfully. 
我尽力在HTML5画布中仅渲染1像素形式的3D阵列失败。
(I know this has been done before but not with a 3D Array). （我知道这是以前做过的，但没有3D阵列做过）。 But converting a 3D array to an Uint8ClampedArray and pushing to an Uint8ClampedArray isn't easy. 但是将3D数组转换为Uint8ClampedArray并推送到Uint8ClampedArray并不容易。
HTML5 also doesn't have another way to display a pixel manipulatable image. HTML5也没有其他显示像素可操作图像的方法。
Is it correct that putImageData() is for rendering vertical strings of pixels? putImageData（）用于渲染像素的垂直字符串是否正确？
Here is my code, the problem is marked with: "WHAT DO I GOTTA DO HERE": 这是我的代码，问题被标记为：“我在这里做什么？”：
<!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>
To test it you can use: 要测试它，您可以使用：
console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);
3 个解决方案
解决方案1
1 已采纳 2019-01-31 17:36:48
You've created a normal Javascript array - you just need to convert it to a clamped array. 您已经创建了一个普通的Javascript数组-您只需要将其转换为固定数组即可。 Off the top of my head, something like: 在我的头顶上，像这样：
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
(or write your data into a new Uint8ClampedArray instead) （或将您的数据写入新的Uint8ClampedArray中）
解决方案2
1 2019-01-31 18:37:56
Draw 200 x 200 red block into canvas. 将200 x 200红色方块绘制到画布中。 Requires <canvas></canvas> 需要<canvas></canvas>
I would advise against using a 3D array as it seems unnecessarily complicated 我建议不要使用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);
解决方案3
0 2019-04-13 13:36:02
I have the solution and it works, I wanted to post to contribute to the community of Stack Overflow, so the next one with this question could easily do it there selves. 我有解决方案，并且可行，我想发布文章以为Stack Overflow社区做出贡献，因此下一个遇到此问题的人可以很容易地做到这一点。
Just Like above it's a simplified version though: 就像上面一样，它是一个简化版本：
<!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>
as you can see, I've replaced variable x with a. 如您所见，我将变量x替换为a。
I hope this can help others also and thank you all for your suggestion! 我希望这也可以帮助其他人，并感谢大家的建议！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.