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

本文概述

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

图像过滤使你可以对照片应用各种效果。尽管JavaScript至少在大规模上不适合用于图像处理, 但是它可以在浏览器和少量项目中用于不太繁琐的图像。
【如何使用Lena.js使用JavaScript向浏览器中的图像添加图像滤镜(照片效果)】在本文中, 我们将向你展示如何使用Lena.js库向浏览器中的图像添加一些图像过滤器。
1.下载Lena.jsLena.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="http://www.srcmini.com/lena.js"> < /script>

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

bower install lena.js

有关此库的更多信息, 请访问Github上的官方存储库。
2.使用Lena.jsLenaJS非常易于使用, 可以使用两种方法, 即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="http://www.srcmini.com/image.png" /> < !-- or with data URL< img id="original-image" src="data:image/png....." /> --> < canvas id="filtered-image"> < /canvas> < script> // Get the imagevar 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 filtervar filter = LenaJS["red"]; // Apply the filterLenaJS.filterImage(filteredImageCanvas, filter, originalImage); < /script>

最后, 你可以使用filteredImageCanvas.toDataURL(” image / png” )方法简单地获取其base64表示形式, 从而导出带有所应用滤镜的图像。
应用多个过滤器
如前所述, filterImage方法将单个过滤器应用于图像, 但是, 如果再次执行它, 则开始过滤器将被删除。因此, 如果要一个接一个地应用过滤器, 则需要使用redrawCanvas方法。此方法期望以画布作为第一个参数, 其中已渲染带有滤镜的图像, 而第二个参数则是将要附加到图像的新滤镜：

< !-- Image to apply filters --> < img id="original-image" src="http://www.srcmini.com/image.png" /> < !-- or with data URL< img id="original-image" src="data:image/png....." /> --> < canvas id="filtered-image"> < /canvas> < script> // Get the imagevar 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 filtervar filter = LenaJS["red"]; // Apply the initial filterLenaJS.filterImage(filteredImageCanvas, filter, originalImage); // Second filter to apply in this case the invertvar secondFilter = LenaJS["invert"]; // Apply the second filter (with the first filter that has been already applied)LenaJS.redrawCanvas(filteredImageCanvas, secondFilter); < /script>

现场例子你可以玩以下小提琴：
你可以在开发者的网站上访问另一个演示但正式的演示。
编码愉快！