图片渲染小工具

在项目开发中会遇到需要对图片进行各种渲染处理，比如调整亮度、对比度、饱和度、色调等。

下面是一个Demo：

用户可以手动调整图片的各种参数，以达到对图片细节的最佳观测

• 修改亮度

function brightness(adjust: number) {
    adjust = Math.floor(255 * (adjust / 100))
    return this.process('brightness', function (rgba: Rgba_type) {
      rgba.r += adjust
      rgba.g += adjust
      rgba.b += adjust
      return rgba
    })
}

• 修改对比度

function contrast(adjust: number) {
    adjust = Math.pow((adjust + 100) / 100, 2)
    return this.process('contrast', function (rgba: Rgba_type) {
      rgba.r /= 255
      rgba.r -= 0.5
      rgba.r *= adjust
      rgba.r += 0.5
      rgba.r *= 255
      rgba.g /= 255
      rgba.g -= 0.5
      rgba.g *= adjust
      rgba.g += 0.5
      rgba.g *= 255
      rgba.b /= 255
      rgba.b -= 0.5
      rgba.b *= adjust
      rgba.b += 0.5
      rgba.b *= 255
      return rgba
    })
}

• 修改饱和值

function saturation(adjust: number) {
    adjust *= -0.01
    return this.process('saturation', function (rgba: Rgba_type): Rgba_type {
      let max = Math.max(rgba.r, rgba.g, rgba.b)
      if (rgba.r !== max) {
        rgba.r += (max - rgba.r) * adjust
      }
      if (rgba.g !== max) {
        rgba.g += (max - rgba.g) * adjust
      }
      if (rgba.b !== max) {
        rgba.b += (max - rgba.b) * adjust
      }
      return rgba
    })
}

Github源码链接