javascript - 如何访问 Elm 中的图像数据？

Question

我们如何从 Elm 中的图像中获取像素数据？

---

在 JavaScript 中，这是获取图形中一组像素颜色的代码(取自 here)

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() 从 Canvas 中提取像素的颜色.

我们可以连接 image.data 吗？ Elm 中的对象？ 目前我认为这不可能...

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

Elm 有 Virtual Dom .事实上，像这样的问题，可能会在 virtual-dom 中得到解决。这是较低的级别，所以我们不鼓励直接这样做。

但是，Elm 明确区分了 Collage元素和 SVG元素，没有与 getImageData() 的明确接口(interface)功能。

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

---

JavaScript

• <<运算符称为 Left Shift

Answer 1

正如@SimonH 所建议的那样，使用 JS 端口，直到 Elm 提供第一手的方法(如果有的话)。同样的方法适用于您在 Elm 中还不能做的任何事情。

为了其他来到这里的人，我只是作为答案而不是评论来回答。