问题标签 [putimagedata]

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.

0 投票
0 回答
2180 浏览

html - putImageData 与 drawImage 相同

当我在同一个上下文层中绘制多个对象时,我偶然发现了一些东西。

这将覆盖该图像数据区域中的所有内容。如果数据是透明的,则不重要。

与将其绘制到上下文中不同。

如果它被绘制,图像的透明区域仍然会像它们设置的那样起作用,透明的。

所以我的问题是有没有办法使用drawImage“ImageData” putImageData

我想一个简单的解决方案是另一个上下文层,但这对此没有好处,因为我有一些精灵类型必须共享同一层才能正确渲染,并且在 x 的感觉方面看起来不错, y 和 z 方面。

0 投票
3 回答
2531 浏览

javascript - 在Javascript中将两个ImageData混合为一个带有偏移量的ImageData

我正在尝试将两个 ImageData 对象混合为一个对象,以获得类似于此链接中显示的图片的结果

以下是具有两个 ImageData 的 Javascript 代码

在将 redData 和 blueData 放在画布上之前,如何合并/混合它?

0 投票
1 回答
754 浏览

javascript - 在 HTML5 中多次调用 canvas.putImageData

我正在构建一个应用程序,该应用程序canvas.putImageData在 Javascript 中进行用户指定数量的调用。在每次调用 之间putImageData,都会修改图像数据。修改数据所需的时间因调用而异。用户还需要能够在动画运行时停止动画(我使用的是按钮)。最初我使用:

但是,这不会显示每一帧,只显示最后一帧。起作用的是在 之后发出警报canvas.putImageData,但这非常烦人。我尝试使用setInterval并且cancelInterval我相信很多人会建议,但这对我不起作用,原因有两个:

  • 修改图像数据所需的时间各不相同。
  • setInterval 是异步的;如果我使用的延迟太短,对 modify(imgdata) 的调用会堆积在堆栈上,用户将无法在需要时停止动画。

我怎样才能使它正常工作?

0 投票
1 回答
559 浏览

html - 裁剪图像,然后应用过滤器动力学

我正在使用 Kinetic 进行一些图像处理。发生的事情是我裁剪了我的图像,然后通过单击一个按钮,我想让它变成黑白的。由于某种原因,当您首先进行裁剪时,简单的 setFilter 函数在这种情况下不起作用。这是裁剪的代码:

这是我决定用于应用过滤器的功能:

所以现在我得到了带有过滤器的裁剪图像,但是如果我想继续对图像对象做一些事情,我会得到:

我还认为我以前在代码中使用的图像对象现在就像未定义。

因此,例如,我希望在过滤器之后执行 layer.add(image) 并且我希望图像变量是新的黑白变量,而不是旧的变量。

那么有没有人知道问题是什么,或者我怎样才能使新的 imgPixels 与我的图像相同。提前致谢

0 投票
2 回答
9349 浏览

javascript - 使用 pdf.js 和 ImageData 将多页 pdf 渲染到单个 Canvas

我正在尝试将 pdf 渲染到单个画布上,我参考了以下链接来实现相同的效果。

访问:使用 pdf.js 和 ImageData 将 .pdf 渲染到单个 Canvas

var pdf = null;

我看到创建了空间来呈现不显示 pdf 的页面。

任何帮助将不胜感激。谢谢。

0 投票
0 回答
204 浏览

jquery - jQuery 通过 drawImage() 和 getImageData() 操作图像

我遇到了一个问题。我想将图像上的绿色描边转换为黄色描边。

所以:我有一个图像,你在图像上绘图,你会看到绿线。然后,在另一个画布中,我希望那些绿线是黄色的。

到目前为止我有这个:

我只是不知道出了什么问题。它用绿色笔划在左侧绘制图像,但在右侧没有任何内容。此外,当我删除 drawImage() 它确实有效。(它画出绿线和黄线)。

编辑:我做了一个小提琴来说明我的问题:JSFiddle 当你删除<img>标签时,一切正常。但是添加它并没有在 context2 上绘制任何内容。

顺便说一句,我知道有关画布的安全问题。在小提琴中,我使用外部域,但在我自己的代码中,我使用本地文件。

0 投票
1 回答
1331 浏览

javascript - InternetExplorer 中的图像数据集

我有一个数组缓冲区 - 命名MEM- 大于画布宽度 * 高度大小。我想将 arrayBuffer 数据绘制到画布上。

imgData.data.set(...)应该可以工作,因为 imgData.data 是一个 Uint8Array,它具有 .set 方法。它适用于 FireFox 和 Chrome,但在 IE 中我收到此错误:Object doesn't support this property or method: 'set'

初始化:

重绘功能:

0 投票
1 回答
284 浏览

javascript - Canvas putImageData XOR 问题仅在 iPad 上

有谁知道下面的代码有什么问题。

演示:http: //jsbin.com/xecicovi/1/

它在 Windows 和 android 上运行良好,但光标不一致地在 iPad 上留下一些痕迹。我正在使用 getImageData 和 XOR'ing 位和 putImageData 来绘制和擦除矩形光标块。

0 投票
0 回答
142 浏览

android - 如何在android中附加图像以请求url

我做了一个活动,我从相机或画廊中选择一张图片,并且必须通过将其名称和数据附加到 url 来上传到服务器,我听说将其转换为二进制或“imageData”并附加到 requestURL 上传它在服务器上。但我真的不知道该怎么做,任何朋友可以帮我我应该在我的代码中进行哪些更改“?请>..我的代码如下:

main.java

}

日志猫

0 投票
2 回答
2517 浏览

html - putImageData alpha 丢失

我花了很多时间来改变具有透明背景的 png 文件的颜色。我知道如何在 getImageData(ctx,0,0,100,100).data 中设置颜色;但是当我想保存新的PNG图像时,我有白色背景...

我有类似的东西:

示例 (我不知道为什么它在这里 putImageData)

在其他项目中(例如https://crosspop.in/croquis)它是可能的,但我找不到解决方案。

你知道如何从修改后的 getImageData 中创建具有透明背景的画布吗?

问候