问题标签 [putimagedata]

我正在使用文件输入元素从 android 浏览器捕获图像。现在我想将 blob 数据转换为 ImageData 以便我可以使用putImageData.

在上面的代码中，如何将 blobData 转换为 ImageData？提前致谢。

是的，我知道 .getImageData()

我的意思是，比方说，我必须更改一些像素：

似乎，这种方法给了我全新的“真实”（隐藏在我深处）图像数据的副本。我这么说是因为如果你创建一个新的：

并比较两个缓冲区：

所以，每次它从它的位图创建新副本。天哪，为什么？好吧，再进一步：

上面没什么特别的。但是现在，是时候把它放回去了：

而这个内部本身运行新循环并复制我的 imageData。

这么多额外的工作！有没有办法获得实际的 imageData 并在没有 get/put 的情况下对其进行操作？如果没有 - 我再问一次 - 为什么？是安全原因吗？他们害怕我可以用这些像素做什么？

谢谢！

我使用屏幕外canvas根据某些变量的运行时值动态生成某些图像。在屏幕外画布上绘制图像后，我想获取它并在我的 web 应用程序的几个地方使用它。

策略 1：使用屏幕外画布的toDataURL()方法获取data:包含图像的 URI，我可以通过编程方式img在页面中应该显示它的多个元素上设置该 URI。

策略二：使用离屏画布的getImageData()方法获取ImageData实例。img用元素替换canvas元素并调用putImageData()它们。

哪种策略在记忆方面更有效？哪个更“惯用”？我试图避免重复保存显示图像实例所需的内存。其他建议？

我在同一页面上有两个画布，具有不同的 ID。我用第一个画布画图像，第二个就像一个相册，你可以看到你所有的画……当我使用它时var Img = painter.getImageData(0, 0, 100, 100)，album.putImageData(Img, 0, 0)它不起作用。请帮忙！

代码：（可能有一些错误，因为现在是手写的，我原来的代码太长了）

HTML：

JS：

这是我的代码：

• 如果您运行此代码段并单击键盘上的箭头之一，您会看到矩形向相反方向移动，因为我想让屏幕像游戏中的相机一样。这是故意的
  

• 但是，如果单击箭头的对面（上 = 下、左 = 右等）后，您会看到必须单击两次才能使其朝另一个方向移动。用其他箭头试试这个，还是一样。
  

• 如果你多次按下同一个箭头，它经过的距离会越来越大，但从逻辑上讲它必须相同。

我希望它直接响应，而不是单击两次，并且差距始终相同。请在您的回答中解释为什么会发生这种情况。提前谢谢！

在画布中恢复背景时遇到问题。我有一个画布，它根据选项所说的内容改变大小（它可以变得非常大），我在上面绘制图像，现在我想要一个指示器来显示鼠标在网格状格式中的位置。curX问题是红色框被绘制了，但是下次更改or时背景不会重新绘制curY。

我注意到的一个奇怪的部分是，当我将鼠标带到黑色区域时，红色框似乎是深红色，但是当我在同一点上来回移动时，红色似乎变得更强。有时我之前画的红框也会变得更强大，而无需重新访问这些区域，就像一条小路正在形成一样。

只有有时背景会返回，但通常是在我离开该区域时。

...

recursive_offset():在可滚动的 div 中获取鼠标位置

我什至在整个画布上都尝试过 getImageData ，但这似乎不起作用。可能它在离开画布时确实恢复了整个背景，但是一旦我回到画布，红色框又回来了。

我正在尝试复制在 stackoverflow 上描述的方法。但是我遇到了一些我不知道如何解决的问题。

我设置了jsfiddle来演示一切。这是第二个jsfiddle，只有粒子移动和被绘制。

我的问题在于绘图，分析器显示大约 10000 个粒子 drawImage 占用了总循环时间的 40%。没有直接绘图，只有计算，没有什么会妨碍代码执行，所以问题在于绘图。

有没有办法在没有这些副作用的情况下使用这种技术？目前，我向您展示了如何使用圆弧创建圆形区域，但我也将 png 文件用于其他一些对象，它们表现出完全相同的行为。

（问题：黑色重叠区域而不是透明区域，通过上面的圆圈可以看到底部圆圈的边缘）

我希望我尽可能清楚地表达自己（上图非常清楚地显示了我的问题），我要感谢您的帮助。

绘制功能 - 最终绘制到可见画布。

这就是我如何在其他隐形画布上准备粉红色圆形区域。

我有两个可见的画布，一个使用 drawImage，另一个用于从隐藏（缓冲区）画布复制像素。除了一切都是一样的，但是当我将对象移动一些非整数值时，对象开始结结巴巴。我怀疑复制像素时的地板是问题，但我想问一下如何做到这一点以产生与drawImage相同的结果？

我设置了jsfiddle。

（右侧的对象口吃）

复制像素的函数。

我怀疑第 14 行（jsfiddle 第 102 行）：

我可以使用 Math.round 或 Math.ceil 而不是 ~~ 来获得所需的结果，但我不知道哪个会更好或 drawImage 如何处理这个？

@Loktar 的原始代码 - stackoverflow。

I have a specific case, but I'm also curious in general.

I have a canvas, I get it's ImgData using createImageData, and I set it's data property to be something else, in order to then use PutImageData and pass it this modified ImgData.

My PureScript version fails, although writing the logic in Javascript in the console works flawlessly. The error is:

In PureScript:

Writing this javascript in console works (arr is 160*144*4 zeroes)

I've debugged getCleanBuffer and here's what I found

This $9 (ImgData copy with modified data) variable, when inspected, is revealed not to be of type ImgData, like v (the original ImgData) was, but it's just an 'Object'. It's missing the width and height which v had, but even when I fix it during debug I still get the same error.

I think the problem is that the new object is a typeless record. The fact that the width and height were not copied is another problem.

I can write a javascript function to set the data attribute manually. But this case in general, seems like a common one, surely I'm missing something, am I not?

Thanks!

我想使用 XMLHttpRequest 加载 png 文件，然后使用响应在画布对象中设置图像数据，从而完全消除对 Image 对象的需要并直接访问 ImageData。到目前为止，我的代码如下所示：

我在这里做错了什么？将响应中的 ArrayBuffer 转换为 Uint8ClampedArray 是否有问题？我应该使用不同的数组类型吗？是 XMLHttpRequest 吗？这可能吗？