Question

我有这段代码。

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="0.00 0 0 0  0 
              0.00 0 0 0  0  
              1 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>
<a class="profile-link" href="#" title="More about Amelia Bellamy-Royds">
  <img class="profile-pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/AmeliaBR-bw.jpg"/></a>
<a class="profile-link" href="#" title="More about AmeliaBR">
  <img class="profile-pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/AmeliaBR2-bw.jpg"/></a>

CSS

.profile-link {
  display: inline-block;
  padding: 1em;
  width: 10em;
  max-width: 80%;
}
.profile-pic {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: #222 0.2em 0.2em 1em;
  /*
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}
.profile-link:hover .profile-pic, 
.profile-link:focus .profile-pic {
  */
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}
.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}

这样做是因为它在屏幕上显示过滤后的图像。我想将它转换为一个函数。该文件应该由用户上传，然后当我点击一个按钮时，应该应用此过滤器。我该怎么办？这是我到目前为止所做的。

HTML

<form>
    <input id="file-input" type="file" name="image" accept="image/*;capture=camera">
</form>
<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              1.00 0 0 0  0  
              1 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>
<a class="profile-link" href="#" title="More about Amelia Bellamy-Royds">
<pre id="output"></pre>
</a>

     <script>
            var input = document.getElementById("file-input");
            input.addEventListener("change", function(event) {
                var file = input.files[0],
                    img = new Image(),
                    reader = new FileReader();
                                reader.onload = function(event) {
                    var img = new Image();
                    img.width = 300;
                    img.src = event.target.result;
                    document.body.appendChild(img);
                };
                reader.readAsDataURL(file);
            }, false);
        </script>


<body>  
<button type="button" onclick="myFunction()">Try it</button>
</body>

CSS

.profile-link {
  display: inline-block;
  padding: 1em;
  width: 10em;
  max-width: 80%;
}
.profile-pic {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: #222 0.2em 0.2em 1em;
  /*
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}
.profile-link:hover .profile-pic, 
.profile-link:focus .profile-pic {
  */
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}
.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}

Answer 1

在html页面中显示图像后，您可以通过将过滤器类添加到图像来应用过滤器：

docker build

我想将其转换为javascript函数或通过css将图像转换为蓝色或黄色

1 个答案: