Javascript 使用putImageData（）和UInt8ClampedArray从HTML5画布中的3D阵列渲染1个像素
我尽了最大努力在HTML5画布上渲染一个3D数组中的1个像素，但没有成功 （我知道这之前已经做过，但不是用3D阵列）。但将3D阵列转换为Uint8ClampedArray并推送到Uint8ClampedArray并不容易 HTML5也没有另一种显示像素可操作图像的方法 putImageData（）用于渲染垂直像素字符串是否正确 这是我的代码，问题标记为：“我在这里要做什么”：Javascript 使用putImageData（）和UInt8ClampedArray从HTML5画布中的3D阵列渲染1个像素,javascript,html5-canvas,array-push,putimagedata,uint8array,Javascript,Html5 Canvas,Array Push,Putimagedata,Uint8array,我尽了最大努力在HTML5画布上渲染一个3D数组中的1个像素，但没有成功 （我知道这之前已经做过，但不是用3D阵列）。但将3D阵列转换为Uint8ClampedArray并推送到Uint8ClampedArray并不容易 HTML5也没有另一种显示像素可操作图像的方法 putImageData（）用于渲染垂直像素字符串是否正确 这是我的代码，问题标记为：“我在这里要做什么”： 您已经创建了一个普通的Javascript数组-您只需要将其转换为一个钳制数组。在我的脑海里，就像： document.
您已经创建了一个普通的Javascript数组-您只需要将其转换为一个钳制数组。在我的脑海里，就像：
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
（或者将数据写入新的Uint8ClampedArray）您已经创建了一个普通的Javascript数组-您只需要将其转换为一个钳制数组。在我的脑海里，就像：
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
（或者将数据写入新的Uint8ClampedArray）将200 x 200红色块绘制到画布中。需要
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);
const width=200；
常数高度=200；
const canvas=document.getElementsByTagName（'canvas'）[0]；
const context=canvas.getContext（'2d'）；
画布宽度=宽度；
canvas.height=高度；
const destData=新的图像数据（宽度、高度）；
const dData=destData.data；
对于（设y=0；yconst 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);
const width=200；
常数高度=200；
const canvas=document.getElementsByTagName（'canvas'）[0]；
const context=canvas.getContext（'2d'）；
画布宽度=宽度；
canvas.height=高度；
const destData=新的图像数据（宽度、高度）；
const dData=destData.data；
对于（设y=0；y<!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>
我想是谷歌浏览器吧
变量t=
[
240,
128
];
document.getElementById（'canvas'）。宽度=t[0]；
document.getElementById（'canvas'）。高度=t[1]；
var a=新数组（）
{
a、 推送（[]）；
a[a.length-1]。推送（[]）；
a[a.length-1][a[a.length-1].length-1].push（127127127255）；
}
var i=0；
document.getElementById（'canvas'）.getContext（'2d'）.putImageData（新的ImageData（uint8clampedaray.from
(
[]concat.apply
([],
a[i]
)
)i，0）；
i=i+1；
i=0；
我希望这也能帮助其他人，谢谢大家的建议 我有了解决方案，而且它是有效的，我想发布一篇文章，为堆栈溢出社区做出贡献，这样下一篇有这个问题的文章就可以自己轻松地在那里完成了 正如上面所述，这是一个简化版本：
<!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>
我想是谷歌浏览器吧
变量t=
[
240,
128
];
document.getElementById（'canvas'）。宽度=t[0]；
document.getElementById（'canvas'）。高度=t[1]；
var a=新数组（）
{
a、 推送（[]）；
a[a.length-1]。推送（[]）；
a[a.length-1][a[a.length-1].length-1].push（127127127255）；
}
var i=0；
document.getElementById（'canvas'）.getContext（'2d'）.putImageData（新的ImageData（uint8clampedaray.from
(
[]concat.apply
([],
a[i]
)
)i，0）；
i=i+1；
i=0；
我希望这也能帮助其他人，谢谢大家的建议 谢谢你的回答！我马上去看看！哦，不，它又出现了这个错误：未捕获的DomeException:构造“ImageData”失败：输入数据长度不等于（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；这是因为我为RGBA值创建了一个seperate维度。感谢您的回答！我马上去看看！哦，不，它又出现了这个错误：未捕获的DomeException:构造“ImageData”失败：输入数据长度不等于（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；这是因为我为RGBA值创建了一个seperate维度。我已经用while（x.length