如何使用Lena.js使用JavaScript向浏览器中的图像添加图像滤镜(照片效果)

本文概述

• 1.下载Lena.js
• 2.使用Lena.js
• 现场例子

图像过滤使你可以对照片应用各种效果。尽管JavaScript至少在大规模上不适合用于图像处理, 但是它可以在浏览器和少量项目中用于不太繁琐的图像。

在本文中, 我们将向你展示如何使用Lena.js库向浏览器中的图像添加一些图像过滤器。

1.下载Lena.js

Lena.js是一个用于图像处理的微型库。它允许你将一些基本的图像过滤器应用于文档中的图像。你可以从项目中包含Lena.js的本地副本, 也可以使用CDN或本地副本：

<!-- Use CDN -->
<script src="https://cdn.rawgit.com/davidsonfellipe/lena.js/master/dist/lena.js"></script>

<!-- From a local copy -->
<script src="lena.js"></script>

你可以在此处从Github的存储库下载副本, 也可以使用Bower等软件包管理器下载副本：

bower install lena.js

有关此库的更多信息, 请访问Github上的官方存储库。

2.使用Lena.js

LenaJS非常易于使用, 可以使用两种方法, 即filterImage和redrawCanvas。这些方法期望使用图像和画布来应用某些过滤器：

可用的过滤器

Lena.js提供了各种可应用于图像的滤镜。以下列表显示了每个过滤器的ID：

• 红色：红色
• 高斯：高斯
• 灰度：灰度
• 高通：高通
• 反转：反转
• 拉普拉斯语
• prewittHorizo​​ntal：Prewitt水平
• prewittVertical：Prewitt垂直
• 罗伯茨：罗伯茨
• 饱和度：饱和度
• 棕褐色：棕褐色
• 锐化
• sobelHorizo​​ntal：sobel水平
• sobelVertical：sobel垂直
• 阈值化

过滤器存储在相同的全局变量LenaJS中, 并且可以使用键或点表示法通过其id进行访问, 例如LenaJS [” prewittHorizo​​ntal”]或LenaJS.prewittHorizo​​ntal。这些属性是函数, 但是你不会将它们直接用作函数, 而是将LenaJS用作”常量”。

如何运作？

神奇之处在于LenaJS.filterImage方法。此方法期望将使用过滤器渲染图像的画布作为第一个参数, 将应用过滤器(作为常量)作为第二个参数, 并将存储图像的IMG元素作为最后一个参数。该图像可以是通过src加载的文件, 也可以是数据URI base64：

<!-- Image to apply filters -->
<img id="original-image" src="./image.png" />
<!-- or with data URL
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Get the image
    var originalImage = document.getElementById("original-image");
    // The canvas where the processed image will be rendered (With filter)
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filter to apply, in this case the red filter
    var filter = LenaJS["red"];

    // Apply the filter
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);
</script>

最后, 你可以使用filteredImageCanvas.toDataURL(” image / png”)方法简单地获取其base64表示形式, 从而导出带有所应用滤镜的图像。

应用多个过滤器

如前所述, filterImage方法将单个过滤器应用于图像, 但是, 如果再次执行它, 则开始过滤器将被删除。因此, 如果要一个接一个地应用过滤器, 则需要使用redrawCanvas方法。此方法期望以画布作为第一个参数, 其中已渲染带有滤镜的图像, 而第二个参数则是将要附加到图像的新滤镜：

<!-- Image to apply filters -->
<img id="original-image" src="./image.png" />
<!-- or with data URL
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Get the image
    var originalImage = document.getElementById("original-image");
    // The canvas where the processed image will be rendered (With filter)
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filter to apply, in this case the red filter
    var filter = LenaJS["red"];

    // Apply the initial filter
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);

    // Second filter to apply in this case the invert
    var secondFilter = LenaJS["invert"];

    // Apply the second filter (with the first filter that has been already applied)
    LenaJS.redrawCanvas(filteredImageCanvas, secondFilter);
</script>

现场例子

你可以玩以下小提琴：

你可以在开发者的网站上访问另一个演示但正式的演示。

编码愉快！