通过 Go WebAssembly 操作 ImageData 数据

有志者，事竟成！如果你在学习Golang，那么本文《通过 Go WebAssembly 操作 ImageData 数据》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

我想用 go 编写一个照片滤镜，将其用作 webassembly 模块。

go 的类型为 js.value。我可以 get、set、index 和 call 就可以了。但是如何在 go 中快速使用 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);
}

解决方案

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

您目前可以在 tip 上看到它们：

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

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

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

终于介绍完啦！小伙伴们，这篇关于《通过 Go WebAssembly 操作 ImageData 数据》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布Golang相关知识，快来关注吧！