使用 putImageData() 和 UInt8ClampedArray 从 HTML5 Canvas 中的 3D 数组渲染 1 个像素
Render 1 pixel from a 3D array in a HTML5 Canvas using putImageData() and an UInt8ClampedArray
我尽力在 HTML5 Canvas 中只渲染 3D 阵列中的 1 个像素,但未成功。
(我知道以前有人这样做过,但不是用 3D 阵列)。但是将 3D 数组转换为 Uint8ClampedArray 并推送到 Uint8ClampedArray 并不容易。
HTML5 也没有其他方法来显示像素可操作图像。
putImageData() 用于渲染垂直像素串是否正确?
这是我的代码,问题标记为:"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>
要测试它,您可以使用:
console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);
您已经创建了一个普通的 Javascript 数组 - 您只需要将它转换为一个固定数组。在我的脑海中,像这样的东西:
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
(或者将您的数据写入新的 Uint8ClampedArray)
将 200 x 200 的红色块绘制到 canvas 中。需要 <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);
我有解决方案并且有效,我想 post 为 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.
希望对其他人也有帮助,谢谢大家的建议!
我尽力在 HTML5 Canvas 中只渲染 3D 阵列中的 1 个像素,但未成功。
(我知道以前有人这样做过,但不是用 3D 阵列)。但是将 3D 数组转换为 Uint8ClampedArray 并推送到 Uint8ClampedArray 并不容易。
HTML5 也没有其他方法来显示像素可操作图像。
putImageData() 用于渲染垂直像素串是否正确?
这是我的代码,问题标记为:"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>
要测试它,您可以使用:
console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);
您已经创建了一个普通的 Javascript 数组 - 您只需要将它转换为一个固定数组。在我的脑海中,像这样的东西:
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
(或者将您的数据写入新的 Uint8ClampedArray)
将 200 x 200 的红色块绘制到 canvas 中。需要 <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);
我有解决方案并且有效,我想 post 为 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.
希望对其他人也有帮助,谢谢大家的建议!