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

biyezuopinvip

已于 2022-02-27 12:33:52 修改

阅读量2k

点赞数 5

文章标签：前端 html javascript 图片管理镜像

于 2022-02-27 11:59:17 首次发布

本文链接：https://blog.csdn.net/newlw/article/details/123162119

版权

基本实现

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

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

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

使用镜像：

使用蓝色：

效果可以叠加。

点击还原则还原至原图。

实现代码

二级页面的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 id="filtered-image"></canvas>
    </div>
    <button id="mirror">镜像</button>
    <button id="grey">黑白</button>
    <button id="red">红色</button>
    <button id="blue">蓝色</button>
    <button id="green">绿色</button>
    <button id="restore">还原</button>
</body>
<script src="deal.js"></script>
<script src="lena.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js">
</script>
</html>

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

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

layout.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;
}http://www.biyezuopin.vip

deal.js中代码如下：

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);
    });http://www.biyezuopin.vip
}