Check out this code snippet.
<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;
}
/* More styles here */
.defs-only {
position: absolute;
height: 0; width: 0;
overflow: none;
left: -100%;
}
I want to further enhance this code by turning it into a reusable function for applying filters on uploaded images. Currently, I have integrated an image upload feature but need help executing the filtering process when a button is clicked. Here's what I've done so far:
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;
}
/* Additional CSS properties */
.defs-only {
position: absolute;
height: 0; width: 0;
overflow: none;
left: -100%;
}