问题标签 [putimagedata]

我在 HTML 画布上进行像素级操作时遇到了该putImageData()函数的错误。这是我的代码：

当我尝试在我的浏览器 (Firefox) 中运行此代码时，无论我等待多长时间，页面都无法加载，并且最终会询问我是否要停止加载过程。问题似乎在于我的 for 循环，因为如果我运行代码的单个实例，它就可以工作。但是，当我将其置于循环中时，它又回到不加载状态。即使我改用 while 循环也是如此。我知道这putImageData可能很慢，但我觉得我错过了一些明显的使循环无限的东西，但我就是找不到它。

因此，我尝试在本地计算机（而不是服务器）上使用 Chrome 执行以下操作。

我得到以下信息：

画布大小为 1920x1080，然后使用CSS( width:100%;) 缩小以适合。drawImage我所做的是使用本地文件夹中的图像。Chrome 已开始使用google-chrome --allow-file-access-from-files index.html.

我正在加载一个像素字体文件作为png图像。然后我使用它canvas通过写入缓冲区 imageData.data来绘制每个字符array，然后使用putImageData.

除了将图像加载为fontImagepng image然后这 7 行...

谢谢。

我正在做有角度的项目，我必须在画布上放一张图片。图像不是本地存储的，我只有图像数据，所以我使用它。

现在我的问题是我收到的图片是 640 * 480。我想知道是否有办法更改图像大小以便我可以显示大于 640 * 480 的？

我正在尝试制作游戏，并且我有一些会相互重叠的精灵。当使用 清除精灵的区域时clearRect，它后面的任何精灵都会消失，就好像前景精灵不透明一样。但是，如果我尝试使用 保存和恢复精灵背后的区域get/putImageData，就会开始发生奇怪的事情。各个地方的部分精灵没有“未绘制”，其他部分似乎被分解并在几码之外，其他精灵被涂抹。这是一个代码块：

对于那些想知道的人，是的，我确实调用了 Canvas 2D Context xbios。当时只是觉得这是一个有趣的名字。无论如何，根据我的理解，this在“对象”内部，ugnaut它所持有的值将是该对象实例的本地值，所以我假设每个ugnaut人都会在 中保存自己的背景信息this.blk，但我错了吗？我应该使用哪些其他方法？

我正在尝试构建一个漂亮的图形图像（动画！），计算屏幕上每个像素的颜色，然后一次显示所有像素。所以，我在循环中使用了 putImageData 函数。

但由于某种原因，它不起作用。在屏幕上只能看到最后一次迭代（1-2 秒后）。

我尝试在每次迭代后使用 FillRect，但没有帮助。

我最近在 twitch 上观看了 Notch 的一些直播，并对他几年前在 Ludum Dare 挑战赛中的一种渲染技术感兴趣。我尝试将他的 java 代码转换为 javascript 并且遇到了一些问题，这是因为我仍然是来自原始创建像素值的 ctx.putimagedata 的新手。

为什么这个应用程序绘制了预期的输出 4 次，而不是缩放到窗口？由于数组的形状，我应该用 4 的乘法或除数进行迭代吗？我很困惑，所以只想在这里发布。我发现的唯一解决方法是，如果我将 this.width 和 this.height 调整为乘以 4，但这是在画布的边界之外绘制，我相信会导致性能变得糟糕，并且不是真正的有效解决方案问题。

有问题的班级：

I tried my best to render just 1 pixel form a 3D Array in a HTML5 Canvas unsuccessfully.

(I know this has been done before but not with a 3D Array). But converting a 3D array to an Uint8ClampedArray and pushing to an Uint8ClampedArray isn't easy.

HTML5 also doesn't have another way to display a pixel manipulatable image.

Is it correct that putImageData() is for rendering vertical strings of pixels?

Here is my code, the problem is marked with: "WHAT DO I GOTTA DO HERE":

To test it you can use:

使用 JS Canvas putImageData 操作像素时，所需颜色和渲染颜色存在差异。绘制 RGB(255,255,0) 时，画布上的输出是 RGB(254,254,86)。其他值也是如此。问题出在哪里？

这是JSFiddle

检查截图

在 html 画布中，我试图在其中包含透明片段的图像上生成阴影。此图像由代码生成，然后使用以下方法绘制到画布上：ctx.putImageData(dst, 0, 0);

问题是以下代码没有产生任何阴影：

任何帮助，将不胜感激