如何在Elm中访问图像数据？

Question

如何在 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对象吗？目前我认为这是不可能的...

• 现在Collage类型是形式列表...
• HTML也是一个可以将图像放入DOM的模块。
• SVG允许进行一些简单的全局图像转换，但不能在像素级别上进行操作。

Elm具有虚拟DOM。实际上，像这样的问题可能会在virtual-dom中得到解决，因此我们不鼓励直接这样做。

然而，Elm清楚区分Collage元素和SVG元素，没有明确的接口可以使用getImageData()函数。

• 我是否应该使用Elm的新interOp特性编写自己的代码？
• 是否已经存在一种方法在Elm中实现？还是必须编写新的方法？

---

JavaScript

• << 运算符称为 左移位

- john mangual

---

Evan正在逐步学习HTML5规范，并在Elm中启用本地函数，但恐怕这个问题不是他的首要任务。与此同时，我建议您使用端口将值传输到Elm。 - Simon H

@SimonH 我很想fork Collage并自己添加这个功能 https://github.com/evancz/elm-graphics/tree/1.0.0/src 或者也许ports是原型设计的好方法。即使我的解决方案完全错误，我也可以发起pull-request！ - john mangual

@johnmangual - 你最好使用端口而不是对Collage进行更改。getImageData()函数似乎超出了从VirtualDOM中获取的范围，更像是浏览器必须提供的功能。 - Chad Gilbert

@ChadGilbert html5非常庞大，Evan正在努力工作，我相信。它可能需要添加一些本地JS代码以及Elm方法。由于getImageData()在某个时候意味着我创建了一个new Image()，然后使用drawImage()。所以我猜可以让Elm调用JS来实现这个功能。 - john mangual

你为什么想要这样做呢？我可以想象一种解决方案，你可以创建一个自定义元素来加载图像，并将数据以任何你想要的消息形式发送到你的 Elm 应用程序中，然后你可以在 update 中处理它。（我认为由于浏览器 API 的限制，你无法得到更好的体验。）但是，既然 Elm 对二进制数据的支持不太好，你为什么还要这样做呢？ - Gabor

Answer 1

如@SimonH所建议的，使用JS端口直到Elm提供了第一手的方法（如果它真的提供了）。相同的方法也适用于任何你在Elm中无法实现的事情。

我只是为了其他人来这里而回答问题，而不是评论。

- Ethan B. Martin