Question

我只是想知道怎么做，如果有人可以帮我做，我会在图片上方显示文字，并且图片中的颜色滑块会更改图片背景的颜色，我只想下载单击下载按钮时，将显示带有过滤器和文字的图片。

HTML代码

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Healthbar Creator Code</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>

<body>
  <div class="box">
    <center><h2>Creator Code</h2>
    <input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
    <button class="btn" type="button" style="z-index:0;" onclick="myFunction()">Insert</button>
      <script type="text/javascript">
        function myFunction() {
          var code = document.getElementById('entercolor').value;
          document.getElementById("newCode").textContent = code;
        }
      </script>
    <h2>Background color</h2>
    <div class="slidecontainer">
      <input type="range" data-default="0" min="1" max="360" value="1" class="slider" id="hue-rotate" oninput="hueFunction(this.value)">
      <script type="text/javascript">
      function hueFunction(hueVal) {
        var setAs = hueVal + "deg"
        document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")")
      }
      </script>
    </div>
    <h2>Preview</h2>
    <img src="preview.png" id="lgImage">
    <br>
    <button class="dl" type="button" onclick="clickColor(0,-1,-1)" style="z-index:0;">Download</button>
    <br></center>
    <div class="TAG">
      <b><text id="newCode">tag</text></b>
    </div>
    <div class="boxf">
      <p>&copy Narpzy</p>
    </div>
  </div>
</body>

</html>

CSS代码

body{
  background-color: #650090;
}
.box{
  position: absolute;
  left: 50%;
  top: 50%;
  border: 15px solid #262626;
  background-color: #262626;
  padding: 50px;
  transform: translate(-50%, -50%);
}
h2{
  color: white;
  text-transform: capitalize;
  font-family: Arial;
}
.boxf{
  height: 75px;
  width: 105.35%;
  background-color: #202020;
  position: absolute;
  transform: translate(-65px, -10px);
}
p{
  color: white;
  font-family: Arial;
  float: right;
  margin: 28px;
}
.TAG{
  transform: translate(273px, -118px);
}
text{
  font-family: Arial;
  color: white;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 22px;
}
.box input[type="text"]{
  background: none;
  color: white;
  border: 3px solid #707070;
  height: 35px;
  width: 200px;
  border-radius: 40px;
  text-align: center;
  outline: none;
}
.btn{
  margin: 20px;
  background: none;
  color: white;
  border: 3px solid #707070;
  height: 35px;
  width: 75px;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  transition-duration: 0.75s;
}
.btn:hover{
  background-color: #707070;
  transition-duration: 0.25s;
  outline: none;
}
.dl{
  margin: 20px;
  background: none;
  color: white;
  border: 3px solid #707070;
  height: 50px;
  width: 150px;
  border-radius: 40px;
  cursor: pointer;
  transition-duration: 0.75s;
  outline: none;
}
.dl:hover{
  background-color: #707070;
  transition-duration: 0.25s;
  outline: none;
}
.slider {
  -webkit-appearance: none;
  width: 350px;
  height: 15px;
  border-radius: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: 0.2s;
  background: linear-gradient(to right, hsl(0, 100%, 88%) 0%, hsl(30, 100%, 88%) 8.3%, hsl(60, 100%, 88%) 16.6%, hsl(90, 100%, 88%) 25%, hsl(120, 100%, 88%) 33.3%,
  hsl(150, 100%, 88%) 41.6%, hsl(180, 100%, 88%) 50%, hsl(210, 100%, 88%) 58.3%, hsl(240, 100%, 88%) 66.6%, hsl(270, 100%, 88%) 75%, hsl(300, 100%, 88%) 83.3%,
  hsl(330, 100%, 88%) 91.6%, hsl(360, 100%, 88%) 100%);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #707070;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #707070;
  cursor: pointer;
}

img{
  filter: hue-rotate(1deg);
}

这是图片

https://prnt.sc/nbjjjg

之后，将所有内容放入“一个”目录。然后告诉我，然后显示代码。

下载带有顶部文字和过滤器的图片

0 个答案: