0

我有一个用例，其中画布上绘制了某些不同颜色的片段，并且根据用户输入，需要使用新的 ImageData 再次重新绘制画布。对于每种不同的颜色，我们都有一个对应的 newColor 应该替换它，所有这些信息都是使用以下结构中的预处理映射给出的。{'#ff0000' : '#aa8499', '#ee00ff' : '#00ff00'} 这意味着颜色为#ff0000 的段需要替换为#aa8499 等等。目前，我迭代整个图像像素，检查当前像素颜色，使用查找图找到更新的颜色，并创建另一个具有新值的图像数据对象，稍后在 putImageData 中使用它。这种计算新图像数据并将其绘制在原始画布中的 2 路过程需要大量时间，它需要很快。有什么方法可以使用不同段的给定事实来加快处理速度。

当前代码供参考

const data = imageData.data
const tempImageData = this.context.createImageData(image.width, image.height)
for (let i = 0; i < data.length; i += 4) {
    // find updated color
    tempImageData.data[i] = updatedColor[0] 
    tempImageData.data[i + 1] = updatedColor[1] 
    tempImageData.data[i + 2] = updatedColor[2] 
    tempImageData.data[i + 3] = updatedColor[3]
}
ctx.putImageData(tempImageData, 0, 0)
4

0 回答 0