我们如何在HTML5画布中调整级别

Question

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

我正在使用画布图像处理库 - 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;
    });
});