Web前端作业

基本实现

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

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

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

使用镜像：

使用蓝色：

效果可以叠加。

点击还原则还原至原图。

实现代码

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

```html

```

我们可以看到，我们链接了外部的css，即layout.css，以及外部js，即deal.js和lena.js，以及jQuery的 cdn。

主要界面由一个img标签和一个canvas标签构成，外加六个标签。

layout.css的代码如下：

```css body{ background-color: black; display: flex; justify-content: center; align-items: center; } .img{ position: relative; top:0px; height: 400px; } button{ padding: 10px; border-radius: 10px; width:100px; background-color: white; margin: 10px 10px 20px; }

mirror{

position: absolute;
top: 500px;
left:100px;

}

grey{

position: absolute;
top: 500px;
left:400px;

}

red{

position: absolute;
top: 500px;
left:700px;

}

green{

position: absolute;
top: 500px;
left:1000px;

}

blue{

position: absolute;
top: 500px;
left:1300px;

}

restore{

position: absolute;
top: 700px;
left:650px;
width: 200px;

} ```

deal.js中代码如下：

javascript var originalImage = document.getElementsByClassName("img")[0]; var width; var height; originalImage.onload = async () => { width = originalImage.width; height = originalImage.height; var filteredImageCanvas = document.getElementById("filtered-image"); filteredImageCanvas.width=width; filteredImageCanvas.height=height; var ctx=filteredImageCanvas.getContext('2d'); ctx.drawImage(originalImage,0,0,width,height); $('#mirror').click(function (){ var filter = LenaJS["mirror"]; LenaJS.filterImage(filteredImageCanvas, filter, filteredImageCanvas); }); $('#grey').click(function (){ var filter = LenaJS["grayscale"]; LenaJS.filterImage(filteredImageCanvas, filter, filteredImageCanvas); }); $('#red').click(function (){ var filter = LenaJS["red"]; LenaJS.filterImage(filteredImageCanvas, filter, filteredImageCanvas); }); $('#blue').click(function (){ var filter = LenaJS["blue"]; LenaJS.filterImage(filteredImageCanvas, filter, filteredImageCanvas); }); $('#green').click(function (){ var filter = LenaJS["green"]; LenaJS.filterImage(filteredImageCanvas, filter, filteredImageCanvas); }); $('#restore').click(function (){ ctx.drawImage(originalImage,0,0,width,height); }); }

首先我们在画布上画上原来的图片，然后给每个按钮加上监听器。每个监听器中，用lena.js的库中的函数，将画布进行滤镜的处理。