如何在 Elm 中从图像中获取像素数据?
在JavaScript中,这是获取图像一组像素颜色的代码(取自此处)
var image = new Image;
image.src = "starry-night.jpg";
var canvas = d3.select("body").append("canvas");
var context = canvas.node().getContext("2d");
context.drawImage(image, 0, 0);
// beware variable name "image" got used twice
image = context.getImageData(0, 0, width, height);
var x = Math.random()*width,
y = Math.random()*height,
i = (y * width + x) << 2;
pixelColor = d3.rgb(image.data[i + 0], image.data[i + 1], image.data[i + 2]) + "";
该代码将图像加载到
<canvas>
元素中,然后使用image.getImageData()
从画布中提取像素的颜色。
我们能在Elm中接口image.data
对象吗?目前我认为这是不可能的...
Elm具有虚拟DOM。实际上,像这样的问题可能会在virtual-dom
中得到解决,因此我们不鼓励直接这样做。然而,Elm清楚区分
Collage
元素和SVG
元素,没有明确的接口可以使用getImageData()
函数。
- 我是否应该使用Elm的新interOp特性编写自己的代码?
- 是否已经存在一种方法在Elm中实现?还是必须编写新的方法?
JavaScript
- << 运算符称为
左移位
Collage
并自己添加这个功能 https://github.com/evancz/elm-graphics/tree/1.0.0/src 或者也许ports是原型设计的好方法。即使我的解决方案完全错误,我也可以发起pull-request! - john mangualCollage
进行更改。getImageData()
函数似乎超出了从VirtualDOM中获取的范围,更像是浏览器必须提供的功能。 - Chad GilbertgetImageData()
在某个时候意味着我创建了一个new Image()
,然后使用drawImage()
。所以我猜可以让Elm调用JS来实现这个功能。 - john mangualupdate
中处理它。(我认为由于浏览器 API 的限制,你无法得到更好的体验。)但是,既然 Elm 对二进制数据的支持不太好,你为什么还要这样做呢? - Gabor