问题标签 [getimagedata]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 无法通过“content”或“background-image”而不是“src”指定drawImage
由于无法使用src
DOM 属性指定图像集,因此我使用-webkit-image-set
它来指定图像内容,如下所示:
图像内容加载良好,具体取决于设备像素比。现在,我需要将图像转储到画布中。这是我的代码:
此时,data
是一个零填充的数组(而实际图像显然不是空的)。如果我将src
属性设置为#imgTest
eg icon2x.png
,则data
内容会反映实际图像。
知道是否可以将包含 a 的图像的内容转储-webkit-image-set
到 cavas 中?
javascript - HTML5:尝试更改原型时,Ubuntu 的 Firefox 中出现“ImageData is not defined”错误
我正在使用 <canvas> 元素进行简单的物理模拟(如落沙),该元素涉及每个像素的操作;我正在使用 JavaScript。我想向 getImageData 函数返回的 ImageData 类添加一个方法。
这在 Windows 上的主要浏览器中完美运行,但在 Firefox 4 for Ubuntu 中发生错误:“ImageData 未定义”我做错了什么?或者是否只是 Ubuntu 的实现?
javascript - 如何独立创建新的 ImageData 对象?
我想在代码中创建一个新的 ImageData 对象。如果我有一个Uint8ClampedArray
想要制作图像对象的对象,那么最好的方法是什么?
我想我可以制作一个新的 canvas 元素,提取它的 ImageData 并覆盖它的 data 属性,但这似乎是一种错误的方法。
如果我可以直接使用 ImageData 构造函数,那就太好了,但我不知道该怎么做。
html - 加快画布图像裁剪
我正在做一个简单的图像裁剪,用户用鼠标在他们想要保留的区域周围画一条线。当他们确认后,图像的其余部分将被裁剪掉。以下是我目前处理上述裁剪的方式:
但是,这可能会很快陷入困境。您尝试保留的图像越少,运行速度就越快,但即使保存 30% 的图像(画布为 800x800)也会导致它挂起几秒钟。有没有更快的方法来解决这个问题?
javascript - getImageData 丢失透明度 - HTML5 2d 上下文
我注意到一个奇怪的问题getImageData
;获取图像数据时,图像的透明度似乎被忽略了。
canvas
由于在获得图像数据之前需要将任何图像绘制到 a 上,我认为这是一个问题,因为canvas
问题是不透明的。但我错了,因为使用 thecanvas
作为参数来drawImage
保持透明度。
这是我加载图像的方式;
就是简单的callback
绘制函数,它调用draw_image
来绘制图像。
通常的版本;
它只是将画布作为 的参数drawImage
,结果与预期的一样,并保持了透明度。例子。
图像数据版本;
这个从与通常版本中使用的同一画布中获取所需矩形的图像数据,并将图像数据放在我要绘制的画布上。我认为应该保持透明度,但事实并非如此。例子。(这是一个 Dropbox 链接,因为该origin-clean
标志。)
我认为应该保持透明度是错误的getImageData
吗?还是我只是以错误的方式使用它?
无论哪种方式,我们都会非常感谢您的帮助。
javascript - 查找一块画布的 rgb 值
所以我有我的画布,我从中获取一些图像数据,如下所示:
现在在数据中我有很多废话,我不知道它到底是什么,因为我有一个包含 1600 个项目的数组?不知道那是怎么回事..
我想获得整个 20x20 块的平均 RGB 值。我什至如何从图像数据中获取它?
javascript - 是否有可能从 getImageData 中获得超过 8 位的颜色值?
我正在尝试在 html5 画布上操作像素。使用 getImageData 方法,我只能得到一个带有画布 RGBA 值的 Uint8Array。是否有可能获得更精确的数组?我想操作图片的所有 16 位颜色值。
javascript - JS中子域之间的“跨域资源共享策略”?
我有一个包含canvas
脚本的 Tumblr 主题。
跨域资源共享策略不允许context.getImageData()
工作。脚本位于user.tumblr.com,
图像位于static.tumblr.com。
有什么解决办法吗?
谢谢!
javascript - 使用 getImageData 的 JS 画布碰撞检测
作为一个非常缺乏经验的程序员,我正在尝试编写一个游戏来检测玩家何时与画布上的某些颜色发生碰撞。我有一个黑色方块,坐标为“player.x”和“player.y”,尺寸为 50x50,当您按下箭头键时会四处移动。我在画布的其他地方也有一个固定的红色 (255,0,0) 正方形。
下面的函数应该在“玩家”方格周围抓取一个稍大的方格,并找出其中是否有任何红色。如果有,它将发送警报。问题是,这似乎不起作用。
我半意识到这不是检测红色像素的最有效方法,但我想在将代码发布到此处之前简化代码。该功能是否有明显问题?
问题可能在于调用函数的方式。它在另一个函数的末尾被调用,该函数检测用户输入并更改“玩家”方块的坐标。在画布上绘制所有内容之前调用该函数。
提前感谢您的帮助!
javascript - 在 Canvas 上使用 getImageData 进行 JavaScript 颜色检测
我在使用 getImageData 函数时遇到问题。我正在尝试制作一个程序来检测您何时点击红色并弹出一个警报框。我编写了一个名为“collideTest”的碰撞检测函数,虽然我找不到任何问题,但它不起作用。我在下面包含了整个代码,将其分成几个部分以便于阅读。
当我将 collideTest() 中的“255”替换为“0”时,它会一遍又一遍地弹出警报,因此它不会/完全/损坏。我只是不确定发生了什么。
非常感谢您的帮助!!