1. 产品
  2.   图片
  3.   JavaScript
  4.   LensJs
 
  

用于图像处理的开源 JavaScript 库

JavaScript API 用于使用不同类型的过滤器对图像应用不同的效果，例如高斯、灰度、高通、反转、拉普拉斯、镜像、RGB、罗伯茨、饱和度等。

Lena.js 是一个非常简单的轻量级图像处理库，使软件开发人员能够从其 JavaScript 应用程序内部处理不同类型的图像。它是一个纯 JavaScript 库，可以在 Node 和浏览器中运行，无需任何外部依赖。该库是开源的，可在 MIT 许可下使用。该库对于浏览器中的重图像不是很好，但对于处理小图像非常有效。

Lena.js 非常易于使用，可以对图像应用不同的效果。图像过滤器使软件应用程序只需单击一下即可对图像应用不同的效果。该库包含对几个重要图像过滤器的支持，其中一些重要的是高斯、灰度、高通、反转、拉普拉斯、镜像、噪声、Prewitt、RGB、罗伯茨、饱和度、棕褐色、锐化等等。该库还支持将多个过滤器应用于图像。过滤器存储在同一个全局变量 LenaJS 中，可以使用键或点符号通过其 id 访问。

Previous Next

LenaJs 入门

通过 NPM 安装 LenaJs 的推荐方式。请使用以下命令进行安装。

通过 NPM 安装 Lena.Js

 npm install lena.js --save

通过 JavaScript 对图像应用过滤器

开源 Lena.js 库提供了一组有用的过滤器，可用于对 JavaScript 应用程序中的图像应用不同类型的效果。首先请提供正确的图片地址，然后从可用过滤器列表中选择过滤器。您可以使用 filterImage 和 redrawCanvas 方法轻松地将过滤器应用于所选图像。图像和画布将用于应用过滤器。

通过JavaScript加入噪音滤波器

 
const noise = function (pixels, amount = 0) {
  const level = amount * 255 * 0.1
  let random;
  for (let i = 0; i < pixels.data.length; i += 4) {
    random = (0.5 - Math.random()) * level;
    pixels.data[i] += random;
    pixels.data[i + 1] += random;
    pixels.data[i + 2] += random;
  }
  return pixels
}
export default noise

在图像上应用多个过滤器

Lena.js 库使软件开发人员能够在他们自己的 JavaScript 应用程序中对他们的图像应用多个过滤器。通常，通过 filterImage 方法将单个过滤器应用于图像。要将多个过滤器应用于图像，您需要使用 redrawCanvas 方法而不是 filterImage。您需要将已使用过滤器渲染的图像作为第一个参数传递，并且需要将新过滤器作为第二个参数传递，该过滤器将轻松附加到图像中。

通过 JavaScript API 处理图像

LenaJs 库使软件程序员能够以编程方式在 JavaScript 中的图像中添加过滤器。使用 LenaJs 应用过滤器非常简单，API 提供了两种添加过滤器的方法； filterImage() 和 redrawCanvas()。您需要为应用过滤器的方法提供图像和画布。为了获得过滤器，您可以使用 LenaJs['filername'] 方法并使用 filterImage() 方法将其应用于图像。

图像应用对比滤波器

 
const contrast = function (pixels, amount) {
  const level = Math.pow((amount + 100) / 100, 2)
  let data = pixels.data
  let r
  let g
  let b
  for (let i = 0; i < data.length; i += 4) {
    r = data[i]
    g = data[i + 1]
    b = data[i + 2]
    r = r / 255
    r -= 0.5
    r *= level
    r += 0.5
    r *= 255
    g = g / 255
    g -= 0.5
    g *= level
    g += 0.5
    g *= 255
    b = b / 255
    b -= 0.5
    b *= level
    b += 0.5
    b *= 255
    r = r < 0 ? 0 : r > 255 ? 255 : r
    g = g < 0 ? 0 : g > 255 ? 255 : g
    b = b < 0 ? 0 : b > 255 ? 255 : b
    data[i] = r
    data[i + 1] = g
    data[i + 2] = b
  }
  return pixels
}
export default contrast
 中国人