Question

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

在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()从画布中提取像素的颜色。

我们可以将image.data对象与Elm对接吗？现在我认为不可能......

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

榆树有Virtual Dom。实际上这样的问题可能会在较低级别的virtual-dom中得到解决，因此我们不鼓励我们直接这样做。

但是，Elm清楚地区分了Collage元素和SVG元素，没有明确的getImageData()函数接口。

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

的JavaScript

<<运算符名为Left Shift

Answer 1

如@SimonH所建议，请使用JS的端口，直到Elm提供这样做的第一手方法（如果有的话）。同样的方法适用于您在榆树中尚无法完成的任何事情。

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

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

的JavaScript

1 个答案: