问题标签 [putimagedata]

我似乎无法从画布上的特定区域复制图像数据。

我可以在该区域周围绘制一个矩形，但是当我使用 getImageData 时，它会捕获一个不同的区域。

我正在尝试使用标记为单击的灰色框

让 sweepImgData = ctx.getImageData(300,250 ,100, 20);

但是当我然后使用时：

ctx.putImageData(sweepImgData, 75, 75);

它显示一个空白框。

谁能把我从痛苦中解救出来？

https://jsfiddle.net/piersheriotwalker/67eLvg1t/53/

我有 2 个多维数组。我想将小数组值插入到特定位置的较大数组中。

这与画布上下文putImageData()函数非常相似，您可以在画布的任何位置插入一个值块。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData

但是，我没有使用画布，我想将“PutSmallArray”放入特定 X、Y 位置的大数组中。

我怎样才能做到这一点？

我有一个用例，其中画布上绘制了某些不同颜色的片段，并且根据用户输入，需要使用新的 ImageData 再次重新绘制画布。对于每种不同的颜色，我们都有一个对应的 newColor 应该替换它，所有这些信息都是使用以下结构中的预处理映射给出的。{'#ff0000' : '#aa8499', '#ee00ff' : '#00ff00'} 这意味着颜色为#ff0000 的段需要替换为#aa8499 等等。目前，我迭代整个图像像素，检查当前像素颜色，使用查找图找到更新的颜色，并创建另一个具有新值的图像数据对象，稍后在 putImageData 中使用它。这种计算新图像数据并将其绘制在原始画布中的 2 路过程需要大量时间，它需要很快。有什么方法可以使用不同段的给定事实来加快处理速度。

当前代码供参考

我正在使用以下代码在运行时将画布替换为纯色。问题是在创建图像时它没有映射到画布。

我正在使用imageData，由于某种原因，它只绘制了图像的一半！

这是我的代码。（有一个canvas元素，ID为canvas）

我想用 javascript 制作一个类似于 minecraft 的东西，并且我已经有一个纹理图像（一个包含块的所有纹理的图像）。有没有办法在不将其绘制在画布上的情况下获取所述图像的特定像素数据？

我真的不知道如何将文件上传到 stackoverflow 以使图像正常工作，但无论如何我都尝试过。我想我已经使用图像和画布元素完成了它，它的工作时间大约有四分之三：

我正在尝试创建一种体验，用户可以将自定义光标移动到图像上并更改该自定义光标内的像素。

在这种情况mousemove下，我尝试重新创建此自定义光标路径并使用isPointInPath来确定自定义光标是否“超过”主画布上下文中的给定点。

该代码确实改变了主画布中的一些像素。但是，下面列出了以下意外行为：

• 移动光标会改变主画布中多个区域的像素
• 主画布的 x 和 y 坐标（源自 imageData）不正确

（见下图）

为什么会这样？如何更改代码以使自定义光标（又名圆形）仅更改与主画布的该部分相对应的像素？

我正在尝试使用 perlin 噪声来使用 html 画布创建噪声图。

这是我的代码：

上下文信息：

NoiseMap是一个二维数组，包含从 0 到 1 的数字（浮动）。噪声图数组大小等于画布宽度/高度。

运行此代码后，画布根本不会被绘制。奇怪的是，如果我从以下位置删除索引乘法：

至

它呈现：

请注意，噪声图被固定，因为我没有正确地将数据分配给 imageData.data。事实上，大约 3/4 的 imageData.data 数组接收到 0。

所以我肯定需要将 pixelIndex 乘以 4。根据控制台日志正确填充我的 imageData.data 数组。

所以我想知道可能会发生什么......任何线索？

The idea is to redraw the background when a line is moved along a canvas:

my working code is the following:

My question is: why I can't store only the line but I need to store and restore from mouseXdet-1 to mouseXdet-1+2 to not having picture mess up like in the second picture?

您好开发人员，任何人都可以知道如何在 javascript 中决定在视频背景中删除哪种颜色？

现在我只删除绿色背景

我在这里使用画布。frame.data 是从 canvasContext.getImageData() 返回的 rgba 像素值