问题标签 [getimagedata]

我使用代码在视频标签中显示网络摄像头显示的内容。

如果支持网络摄像头访问，我每秒调用一次此函数：

使用 var video

问题是当我像这样放置这些行时，“text_01”的文本会成功更改：

但不是这样：

在某些功能之后使用 innerHTML 是否有某种限制？

JS小提琴链接

我正在尝试单击画布（具有线性渐变）并在单击时获取图像数据

另外我想在那个（点击）点放置一个相对定位的黄色（选择器）

问题1：当我点击下部（白色）时，它给了我错误的颜色值

问题2：黄色（选择器）未准确放置在点击点

注意：由于边框半径：50%，画布看起来很圆

在（小提琴链接上方）给出的代码的重要部分是

编辑 答案包括小提琴会更好:)

我只在 chrome 中遇到错误。我的代码（以下）在 Mozilla 中运行良好。我没有跨域问题。那么为什么我可以在 chrome 中得到上述错误呢？

我试图生成一个带有随机噪声的画布，但我无法以 60fps 生成整个随机像素画布，所以我最终使用内存中的一个临时画布来生成一个小的 64x64 平铺，然后使用上下文填充重复该模式，并让浏览器将这些字节推送到屏幕上，而不是使用 javascript 引擎。

它要快得多，即使在全屏下，我也可以在 iOS 设备上获得稳定的 60fps，但我注意到几分钟后 fps 会下降，直到变得非常慢。

在这个小提琴上，我没有使用应该限制为 60Hz 的 requestAnimationFrame，而是使用自定义循环，在我的 macbook 上，它从 500Hz 左右开始，并迅速放慢以强调问题。

http://jsfiddle.net/Victornpb/m42NT/2/

使用getImageData，我试图在图像上创建径向淡入淡出效果，其中point(0,0) 的alpha 为0，point(img.width, img.height) 的alpha 为0.5，如下所示：

（最后一点的 alpha 为 1.0，但想象一下它是 0.5。）

我已经能够使用在我的for循环中创建线性 alpha 增加

但是左边缘（显然）随着循环迭代而变得更加明确。

我尝试使用两个循环，一个在数组中创建行“中断”，另一个用于处理 alpha 操作，如下所示：

但它的性能真的很慢，它没有达到我正在寻找的淡入淡出。我也不确定我是否正确地做到了这一点。我还尝试了使用 Mozilla Hacks 网站上概述的Typed Arrays的 Faster Canvas Pixel Manipulation，但使用该方法甚至没有将图像绘制到画布上。（我正在使用 Chrome - 不确定这是问题所在还是我的代码。）

有任何想法吗？

编辑：感谢 markE 的出色解决方案 - 它非常快。我在对他的评论中提到了这一点，但这里是创建灰度图像（我的要求的一部分）的完整代码，该图像在标记的演示中显示了淡入淡出。

我在 HTML5 画布上绘制图像，图像的来源是 SVG 字符串。然后我 getImageData 的画布，这在 Firefox 和 Chrome 中运行良好，但在 IE11 中它会调用安全错误。

我写了一个简单的测试页来重现我的问题。

我找到了一些解决使用 XMLHttpRequest 的方法，但它们的图像源是真实的 URL，而不是 SVG 字符串。

那么有什么方法可以使用 SVG 字符串作为图像源，但在 getImageData 时不会在 IE11 中调用安全错误？

我实际上是在尝试获取每个图像的数据，但要做到这一点，我需要将每个图像绘制到画布中。

节点解释器说我的图像没有完全加载，但我不知道为什么。

有人知道我的程序出了什么问题，因为我搜索了但我没有找到任何答案，这是我的代码：

一位客户需要一个提取产品图像主色的程序的帮助。

我能够在 Javascript 中快速实现这一点；下面的算法仅对图像上 3x3 网格的中心正方形进行采样，以快速估计图像中的 T 恤颜色。

有问题的图像是这个（下面的预览）。

但是，在上面的代码中处理此图像时的结果因机器/浏览器而异：#FF635E这是我在运行 Windows7 并使用 Firefox 32 的机器上看到的结果。运行 Mac 的客户端#FF474B在 Safari 和#FF474CFirefox 33 上得到结果。

虽然结果很接近，但为什么它们在理想情况下并不完全相同？getImageData确实会因本地设置而异，还是 JPG 数据在不同机器上的解释不同？

编辑：此图像不是一次性案例。在客户要求处理的一系列图像中发现了这种颜色变化。我和我的客户对同一组图像获得了不同的结果。

以下函数应获取图像数据（使用context.getImageData()现有画布，包含图像（已加载到网页上）和页面上未显示的第二个画布。

第一个画布的数据按预期“获得”，并alert(data1.data.length)以合理的数字弹出。然而，第二个画布的数据没有“得到”，并且函数在该alert(data2.data.length);行之前中断。那是唯一似乎在整个函数中不起作用的行，这是我的问题。

在函数获取图像数据后，它将根据操作值将它们传递给另一个函数。（它将与、或、异或或不将像素数据数组的内容放在一起）

编辑：这是我收到的错误消息：“未捕获的 SecurityError：无法在 'CanvasRenderingContext2D' 上执行 'getImageData'：画布已被跨域数据污染。”

我正在将图像绘制到 HTML 画布上并从中获取图像数据以查找特定像素的颜色。该图像是一张地图，其中每个国家的颜色都不同。我想将 .getImageData() 返回的颜色交叉引用到我手工制作的颜色列表中，以查找任何给定像素所在的国家/地区。

我的问题是，我在画布上绘制的图像和绘制的图像颜色略有不同。

这是绘制到画布上的原始图片：

这是我将画布下载为 PNG 时得到的图片：

两者看起来几乎相同，但如果你下载它们并在照片编辑软件中打开它们，你会发现它们不是。例如，上图中的灰色海洋为 73,73,73,255，下图中的灰色海洋为 71,71,71,255。

我仍然可以完成确定像素所在国家/地区的目标，但我需要根据我下载的图片在绘制到画布后创建一个新列表。

这似乎是一个非常奇怪的问题。

如果有人想知道，我的代码如下所示：

HTML：

JS：

另外，我正在为 Ubuntu 使用 Firefox 31

-谢谢您的帮助