Web前端作业：Html+JS实现的图片镜像、黑白、红色、绿色、蓝色及还原

最新推荐文章于 2023-07-04 08:10:44 发布

m0_67392661

最新推荐文章于 2023-07-04 08:10:44 发布

阅读量1.3k

点赞数

分类专栏：前端 html 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_67392661/article/details/123373979

版权

本文介绍了如何使用HTML和JavaScript实现图片的镜像、黑白、红色、绿色、蓝色滤镜效果，并提供还原功能。通过在二级界面的img和canvas元素上应用不同的滤镜函数，实现了效果的叠加。关键代码包括对按钮的监听器设置以及调用外部JavaScript库来处理画布上的图像。

摘要由CSDN通过智能技术生成

首先我们来到主界面，有一些图片供选择。

我们随便挑选一张图片，假如选择甘雨，进入甘雨的二级界面：

我们看到有六个按钮，上面五个分别是镜像、黑白、红色、绿色、蓝色，下面最大的是还原。

使用镜像：

使用蓝色：

效果可以叠加。

点击还原则还原至原图。

二级页面的html中是如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P1</title>
    <link rel="stylesheet" type="text/css" href="layout.

关注

专栏目录