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

Question

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

---

在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().

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

• 现在Collage类型是表格列表......
• HTML 也是一个可以将imags放入DOM的模块.
• SVG 允许一些简单的全局图像变换,但在像素级别没有任何内容

榆树有虚拟Dom.事实上,这样的问题可能会在virtual-dom较低的层次上得到解决,因此我们不鼓励我们直接这样做.

但是,Elm明确区分了Collage元素和SVG元素,没有明确的getImageData()函数接口.

• 我是否使用Elm的新interOp功能编写自己的内容？
• 榆树已经存在一种方式吗？或者必须写一个新的？

---

JavaScript的

• 在<<运算符称为Left Shift

Answer 1

正如 @SimonH 所建议的，使用 JS 的端口，直到 Elm 提供了第一手的方法（如果有的话）。同样的方法适用于您在 Elm 中还无法执行的任何操作。

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