问题标签 [getimagedata]

我正在尝试（新手）在 webgl 中构建应用程序。我已经到了要加载图像数组并对其进行一些像素操作的地步。我正在尝试获取数组中每张图片的第一个像素列，并用它构建一张新图片。然后将这个新生成的图片推送到另一个数组中。（然后采取下一列等..）

我通过在 2D 画布上绘制图像，然后读回像素来完成此操作。经过几次递归后，我得到了所需的图像并使用 base64 编码（和 PNGlib.js 库）将其写回数组。

问题是纹理在加载页面时都保持黑色。在我手动重新加载页面之前都是如此。

http://home.scarlet.be/~cornetp/（仅在 Firefox 4 中测试）

我希望图像立即显示，如果有人可以看一下，

谢谢，

我一直在尝试制作一个脚本来比较 HTML5 和 Javascript 中的两个图像。但出于某种奇怪的原因，它总是返回图像完全相同。

在查看问题可能是什么时，我发现每个像素的每个数据值都返回，出于某种奇怪的原因，“0”。

那么，知道我做错了什么吗？:)

出于某种原因，我觉得这很简单，但我刚刚了解了画布元素，所以是的。

这是我的代码：

有一个 3x3 的图像。CanvasPixelArray 是：

我通过以下方式将所有像素的 alpha 更改为 0 并返回：

所有像素都变黑了。浏览器将颜色更改为黑色以节省内存。有没有办法防止这种情况，或者我应该保存一个副本？

尽管我的问题似乎是重复的，但我想为此找到一个明确的解决方案。

我正在一个 jsp 文档中使用 Jfreecharts 生成图表（.jpg 或 .png 类型）（存储在同一个项目的图像/文件下），我希望在另一个文件中显示它。

虽然我能够动态生成图表，但我无法在其他 jsp 文档中显示生成的图表。它在第一次运行期间没有返回任何内容。并在后续运行期间显示先前生成的图表。

我认为这可能是由于 n jsp 或 smethg 完成的静态绑定。

如何显示在其他jsp文档中动态创建的图像？

感谢您宝贵的时间...

所以，我在<script>零件内部创建的“上下文”变量上使用了这个函数 getImageData，当我做一些事情比如画一个矩形然后做 ctx.getImageData.data[0] 它会显示红色我在画布上绘制的那个矩形的值。但是，当我导入图像并将其绘制到画布上并尝试使用 getImageData.data[0] 时，我得到的只是 0，这是没有意义的，我不确定它为什么不能正确读取图像。我已经尝试过这方面的教程，但它们都很模糊，只有部分写在一起。

所以，当我绘制矩形时，它的颜色值就很好了，但是当我绘制图像时，即使没有在画布上绘制矩形，我也永远不会得到图像上那个特定像素的值。

有人能帮我吗？这是我当前的代码：

我是 Construct 2 的开发人员，这是一个适用于 Windows 的 HTML5 游戏编辑器。它位于http://www.scirra.com。

最近我一直在尝试添加一个功能，该功能将通过在画布上转换图像来修改图像。这非常简单——在画布上绘制一个图像并调用getImageData()以获取像素。

当用户在我们的应用程序中单击“预览”时，所有文件都被转储到磁盘上的临时文件中，并启动浏览器来显示它。上传到服务器不是预览的选项 - 有些游戏是兆字节大。

然而，大多数浏览器完全阻止您使用从磁盘加载getImageData()的任何图像的像素。正如 MDN 在其对 file:// 访问策略的描述中所建议的那样，我已尝试将所有必要的图像文件放在子目录中。那也不行！

Chrome 的 --allow-file-access-from-files 标志修复了它。但是，我需要支持所有主流浏览器。至少 Internet Explorer 和 Firefox 是否有类似的解决方法？我对 Internet Explorer 一无所知，我真的希望在 Firefox 中有一些不涉及手动转到 about:config 的东西，否则我们将被大量的支持请求淹没，询问“为什么它在 Firefox 中不起作用？！”。

另外，为什么这个安全策略是必要的？！？它似乎太过分了，让像我们这样的应用程序真的很难编写。

任何帮助表示赞赏。

是否可以在鼠标下获取RGB值像素？有没有完整的例子？这是我到目前为止所拥有的：

我一直在尝试为我正在创建的 javascript 游戏制作一些视觉效果，我注意到我用来调节精灵颜色的一段代码使我的浏览器内存使用量不断增加，看似没有限制。

您可以在此处查看代码和内存泄漏：http: //timzook.tk/javascript/test.html

这种内存泄漏仅发生在我的 updateimage() 函数中，当我每帧（通过 setInterval）从画布上下文中调用 getImageData 以使新的 ImageData 对象重新着色时。我原以为javascript的垃圾收集器会破坏旧的垃圾收集器，但如果不是，我不知道如何手动销毁它。任何帮助弄清楚它为什么这样做或如何解决它将不胜感激。

我的问题与这个问题非常相似：What is leaking memory with this use of getImageData, javascript, HTML5 canvas但是，我需要我的代码来运行 setInterval 调用的函数中的每一帧，他将其移出 setInterval 函数的解决方案是这对我来说不是一个选择，我不能发表评论询问他是否找到了其他解决方法。

测试人员请注意：由于此示例使用 getImageData，因此无法仅通过将其放入 .html 文件中进行本地测试，因此需要 Web 服务器。此外，它显然使用 HTML5 元素，因此某些浏览器无法使用它。

编辑：*已解决* 谢谢，下面的解决方案修复了它。我没有意识到你可以像在 drawImage() 中使用图像一样使用画布元素，我重组了我的代码，因此它现在使用的内存显着减少。如果有人想查看，我将此更改后的代码上传到上面链接的页面。

你好亲爱的社区。

我正在尝试从从 Flickr 获取的图像中提取颜色。当我尝试使用 getImageData() 处理画布中的图像时，这一切都非常有效。

正如通过 WHATWG 将图像加载到画布中所描述的那样，设置一个标志，因此您无法对其进行操作。所以我的问题是 FLICKR 支持 CORS 吗？

我也尝试在其中进行图像处理，但这是一个非常繁重的过程（处理 250 张图像大约需要 4 分钟）。

如果您有任何线索，只需 ping 我。

环境：Mac OSX，HTML5，jQuery

我正在做一个 HTML5 小游戏，在地图开头加载我的精灵时，我使用 GetImageData()/循环遍历所有图像/PutImageData() 进行了一些处理。

这在我的 PC 上效果非常好，但是在我的手机上却非常慢。

我一直在做一些非常基本的基准测试，GetImageData 和 PutImageData 都运行得非常快，需要很长时间的是内容的循环。

现在，我显然预计手机会变慢，但 1000 倍听起来有点过分，而且在我的 HTC 上加载大约需要 4 分钟，所以这是行不通的。此外，游戏中的其他一切都以非常合理的速度运行（主要是因为屏幕小得离谱，但对于手机上的 JS 来说，它仍然运行得非常好）

我在这个处理中所做的基本上是将精灵“变暗”到一定程度。我只是循环遍历所有像素，然后将它们乘以 < 1 的值。仅此而已。

因为这太慢了......有没有更好的方法来做同样的事情，使用 Canvas 功能（合成，不透明度，等等），而不是一个一个地循环遍历所有像素？

注意：这一层有一些 100% 透明像素和一些 100% 不透明像素。两者都需要保持 100% 不透明或 100% 透明。

我认为那行不通的事情：
1）在新的画布上绘制精灵，不透明度较低。这不起作用，因为我需要精灵保持不透明，只是更暗。
2）绘制精灵，并在它们上面绘制一个半透明的黑色矩形。这会使它们变暗，但它也会使我的透明像素不再透明......

有任何想法吗？

这是我正在使用的代码，以防万一你在其中看到一些非常愚蠢的东西：

编辑：这是我试图用图像做的一个例子：
原始：http:
//www.crystalgears.com/isoengine/sprites-ground.png 变暗：http ://www.crystalgears.com/isoengine /sprites-ground_darkened.png

谢谢！
丹尼尔