Question

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

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

根据我的发现，Photoshop中的Levels是画布中的色彩校正，但我在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;
    });
});

我们如何调整HTML5 Canvas中的关卡？

1 个答案: