问题标签 [putimagedata]

是否可以使用ImageData数组对象来获取 Image() 对象。我的最终目标是使用drawImage，而不是putImageData因为putImageData太慢（来自 stackoverflow 类似的 qs 和我自己的测试）。我所拥有的只是ImageData我想在 canvas 上的现有图像之上绘制的数组。

我有一系列构建 rgba 序列数组的函数，我打算将这些数据应用于画布对象。我不确定如何将 rgba（已经是 0-255 值）转换为可以使用 .putImageData 的正确 imageData 对象。

我得到的只是白色，即使 rgba_array 值的输出显示了正确的值流。

我正在尝试反转图像的颜色。现在图像加载正常，但是当我尝试调用 getImageData 和 putImageData 回到画布上时。画布只是空白。然后我打印出所有的imageData，由于某种原因，它看起来总是为0。我对此感到非常困扰。请提前帮助和谢谢！

我通过以原始 ImageData 格式（RGBA 顺序每像素 4 个字节）发送每一帧来通过 WebSocket 流式传输视频。当我收到客户端上的每一帧（作为）时，我想使用putImageDataArrayBuffer尽可能有效地将这个图像直接绘制到画布上。

这是我目前的解决方案：

但它比较慢。我关于原因的理论：

• 数组（大小约为 1MB）被复制三次，一次复制到Uint8ClampedArray，一次复制到ImageData，最后复制到画布中，每帧（每秒 30 次）。

• 我new每帧使用两次，这可能是垃圾收集器的问题。

这些理论是否正确，如果正确，我可以使用什么技巧来尽可能快地做到这一点？我愿意接受特定于浏览器的答案。

我需要处理图像中的像素并将整数值（0-255）保存在 RGBA 值中。

再次获取 ImageData 并在各自的索引中打印值后，结果如下：

因为赋值的值和救出来的值不一样？？？

谢谢！

所以我的代码在这里遇到了一些问题。

本质上，我正在尝试拍摄我的图像，并创建一个比原始图像大 x 倍的新图像。

我通过复制每个像素的 r、g、b 和 a 并将信息放入一张新图片中来做到这一点，然后我将其打印在新的画布上。

我没有收到任何错误，但它也没有出现在我的画布上？

知道我做错了什么吗？

我的代码：

用工作代码更新

这将拍摄一张图像，然后将其放大以消除锯齿。它不保留透明度，但可以轻松调整：

需要进行一些像素操作，但图像数据已更改。现在它有一个“色彩空间”属性。这是什么，我该如何正常使用它？

只需在 chrome 中获取一个 imagedata 对象即可重现。

此代码末尾的 putImageData 会使 Raspberry Pi 中的“Web”浏览器崩溃。

它在 Windows 中运行良好：FireFox、Chrome、Opera、Internet Explorer。

它在 Raspberry Pi 中不起作用：

• Web（顿悟）：putImageData 使应用程序崩溃
• Midori：在启动时挂断
• Dillo：没有 JavaScript
• 铬：无法安装

附加信息：

• 画布为 750 x 350（触摸屏为 800 x 480）
• Raspi 版本：Raspian GNU/Linux 8 (jessie)

控制台说：

顿悟浏览器：../../../../src/cairo-surface.c:1626：cairo_surface_mark_dirty_rectangle：断言`！_cairo_surface_has_snapshots (surface)' 失败。中止

我正在开发一个 javascript 应用程序，它以 .cube 格式读取 3D 颜色查找表，解析数据并从这些值创建 ImageData 对象，最后将其应用于另一个图像。

我在将 3D CLUT 转换为 javascript 中的 imageData 对象时遇到问题。

过程是这样的：我有 .cube 格式的 3D 颜色查找表。

.cube 文件示例：

我解析了 .cube 文件并获得了包含所有值的数组并将其放入 Uint8ClampedArray 中，因此我可以创建 ImageData 对象并最终使用 putImageData() 函数将其绘制到画布中。

代码看起来像这样：

...

当我尝试使用 64*64*64 大小的查找表运行此代码时，一切正常，成功创建 ImageData 并生成图像内容。但是当我尝试使用其他大小的 LUT（17 或 33 或 5...）时，我收到一个错误：

“构造‘ImageData’失败：输入数据长度不是（4 * 宽度）的倍数。”

如果我尝试更改宽度和高度值，则会出现错误：

“构造‘ImageData’失败：输入数据长度不等于（4 * 宽 * 高）。”

所以我现在有点困惑......我没有收到错误的唯一例子是当我放

var width = result.data.length; var height = 1; 但是，当然，这没有用，因为我得到了 1px 的高度......

那么，如何让它与 64*64*64 以外的 LUT 一起使用？这篇文章对我很有帮助，开始...

如何在 JavaScript 中使用 LUT？

谢谢！

我有以下任务，我试图以最有效的方式完成：我有不同数量的不同大小的图片作为像素数组，我需要逐个像素地添加到画布中。每个像素的值都必须添加到画布的 ImageData 中，以便结果是两个或多个图像的混合。

我目前的解决方案是从图片需要与图片大小混合的位置检索 ImageData。然后我将图片的 ImageData 添加到检索到的 ImageData 并将其复制回相同的位置。

从某种意义上说，这是canvas globalCompositeOperation“更轻”的手动实现。

该解决方案工作正常，但速度很慢。我不知道逐像素混合是否可以非常有效，但性能缓慢的一个原因可能是每次将新图像混合到画布中时我都需要获取 ImageData 并将其放回原处。

因此，主要问题是我如何才能在开始时获得整个画布 ImageData，然后根据需要混合到画布中的每张图片的位置和大小来查找正确的像素以更新，最后将更新后的 ImageData 放回画布？此外，非常感谢有关如何使混合更有效的任何其他想法。