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

原创

于 2022-03-09 11:55:31 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本实现

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

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

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

使用镜像：

使用蓝色：

效果可以叠加。

点击还原则还原至原图。

实现代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P1</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
    <div>
        <img src="../images/图1.jpg" class="img">
        <canvas i

最低0.47元/天解锁文章

200万优质内容无限畅学