image - 使用 Go WebAssembly 访问 ImageData.data

Question

我想在 Go 中编写一个照片滤镜以将其用作 WebAssembly 模块。

Go 的类型是 js.Value。我可以在其上Get、Set、Index 和Call。但是如何使用 ImageData.data 中的像素数组？以快速的方式进行？使用类似 data.Index(index).Int() 和 .SetIndex(..., ...) 的方法非常慢。而且我没有检查这是否得到了正确的结果。

第一次尝试非常慢(比 JS 或 Rust 慢 50 倍):

func Convolve(canvas js.Value, matrix []float64, factor float64) {
    side := int(math.Sqrt(float64(len(matrix))))
    halfSide := int(side / 2)
    context := canvas.Call("getContext", "2d")
    source := context.Call("getImageData", 0.0, 0.0, canvas.Get("width").Int(), canvas.Get("height").Int())
    sourceData := source.Get("data")
    imageWidth := source.Get("width").Int()
    imageHeight := source.Get("height").Int()
    output := context.Call("createImageData", imageWidth, imageHeight)
    outputData := output.Get("data")

    for y := 0; y < imageHeight; y++ {
        for x := 0; x < imageWidth; x++ {
            outputIndex := (y * imageWidth + x) * 4
            r := 0.0
            g := 0.0
            b := 0.0
            for cy := 0; cy < side; cy++ {
                for cx := 0; cx < side; cx++ {
                    scy := y + cy - halfSide
                    scx := x + cx - halfSide
                    if scy >= 0 && scy < imageHeight && scx >= 0 && scx < imageWidth {
                        sourceIndex := (scy * imageWidth + scx) * 4
                        modify := matrix[cy * side + cx]
                        r += sourceData.Index(sourceIndex).Float() * modify
                        g += sourceData.Index(sourceIndex + 1).Float() * modify
                        b += sourceData.Index(sourceIndex + 2).Float() * modify
                    }
                }
            }
            outputData.SetIndex(outputIndex, r * factor)
            outputData.SetIndex(outputIndex + 1, g * factor)
            outputData.SetIndex(outputIndex + 2, b * factor)
            outputData.SetIndex(outputIndex + 3, sourceData.Index(outputIndex + 3))
        }
    }

    context.Call("putImageData", output, 0, 0);
}

Answer 1

Go 1.13(尚未发布)向 syscall/js 添加了 2 个函数，允许您复制整个数组，因此您不必恢复调用 Index() 和 SetIndex() 到每个像素的每个组件!

目前您可以在提示上看到它们:

https://tip.golang.org/pkg/syscall/js/#CopyBytesToGo

https://tip.golang.org/pkg/syscall/js/#CopyBytesToJS

所以基本上您可以做的是首先将整个图像数据复制到 Go 字节 slice 中，然后在 Go 中使用它(进行过滤)，完成后，将更改后的 slice 复制回来。它只需要 2 个 js 系统调用。