html5-canvas - 我们如何调整 HTML5 Canvas 中的级别？

Question

我有一个 psd 文件，我要在画布中创建一个类似于 psd 中的图像。在 Photoshop 中应用于图像的滤镜之一是“色阶”。

我正在使用 Canvas 图像处理库 - CamanJS。

根据我的发现，Photoshop 中的级别是画布中的颜色校正，但我在 CamanJS 中没有看到任何 api。

知道我们能不能做到这一点？如果它使这项任务更容易，我愿意接受任何其他图书馆。

提前致谢。

Answer 1

您可以使用 CamanJS 进行图像调整，如 Photoshop 的“级别”。

Photoshop“色阶”调整实际上是 3 个主要调整的组合：

• 亮度
• 对比
• 颜色通道

这是 Photoshop 级别调整的 CamanJS 近似值：

// Combining contrast, brightness & channels
// to simulate a Photoshop "levels" adjustment

Caman("#image", function () {

  this

  // adjust contrast (-100 to 100)

  .contrast(contrastAdjustment)

  // adjust brightness (-100 to 100)

  .brightness(brightnessAdjustment)

  // adjust colors (-100 to 100 for r,g,b)

  .channels({red:5, green: 0, blue: 0})

  // and render the filtered image

  .render();

});

要使 Photoshop 能够将这些值限制在一个范围内（如 PS 的直方图控件），您可以从使用 CamanJS“曲线”开始。但是要微调滤镜效果，您必须创建自己的自定义滤镜。CamanJS 允许您像这样定义自定义过滤器：

// create a custom process to clamp Red between low/high values

Caman.Filter.register("ClampRed", function (low,high) {
    this.process("ClampRed", function (rgba) {
        rgba.r = Math.min(low,Math.max(high));
        return rgba;
    });
});