<head>
<link rel="stylesheet" href="../../css/typography.css">
<link rel="stylesheet" href="../../css/variables.css">
<link rel="stylesheet" href="../../css/inputs.css">
<link rel="stylesheet" href="../../css/button.css">
<link rel="stylesheet" href="../../css/callouts.css">
<link rel="stylesheet" href="../../css/switch.css">
<link rel="stylesheet" href="../../css/system.css">
<style>
:root {
--contrast: 2.05;
--opacity: 0.75;
--accent-color: #582c83;
}
input {
accent-color: var(--accent-color);
}
#my-node {
position: relative;
width: fit-content;
}
#my-node img {
filter: grayscale(1) contrast(var(--contrast));
display: block;
}
#my-node::after {
position: absolute;
content: "";
inset: 0;
height: 100%;
background-color: var(--accent-color);
;
z-index: 2;
opacity: var(--opacity);
}
:has(.switch input:nth-of-type(3):checked) {
--accent-color: #FEC10D;
}
:has(.switch input:nth-of-type(5):checked) {
--accent-color: #84bd00;
}
:has(.switch input:nth-of-type(1):checked) {
--accent-color: #582c83;
}
:has(.switch input:nth-of-type(4):checked) {
--accent-color: #ff9800;
}
:has(.switch input:nth-of-type(2):checked) {
--accent-color: #003c71;
}
.switch input:checked+label:nth-of-type(5),
.switch input:checked+label:nth-of-type(3),
.switch input:checked+label:nth-of-type(4) {
color: #393a3b;
}
.switch {
margin: 1em;
}
input[type="range"] {
width: 100%;
}
.btn[disabled] {
cursor: not-allowed;
}
input[type="file"] {
border: 3px solid var(--accent-color);
}
</style>
</head>
<body>
<div>
<label style="margin-left: 1em;">Select Color</label>
<div style="display: flex;gap:1em;max-width:120ch;justify-content:space-between;">
<div class="switch" style="margin-top: 0.25em;">
<input id="switch-first" name="color" type="radio" checked value="Purple" />
<label for="switch-first">Purple</label>
<input id="switch-second" name="color" type="radio" value="Blue" />
<label for="switch-second">Blue</label>
<input id="switch-third" name="color" type="radio" value="Yellow" />
<label for="switch-third">Yellow</label>
<input id="switch-forth" name="color" type="radio" value="Gold" />
<label for="switch-forth">Gold</label>
<input id="switch-fifth" name="color" type="radio" value="Green" />
<label for="switch-fifth">Green</label>
<span class="switch-selector"></span>
</div>
<label>Contrast
<input type="range" id="contrast" min="0.5" max="4" value="2.05" step="0.25" /></label>
<label>Opacity
<input type="range" id="opacity" min="0" max="100" value="75" step="5" /></label>
</div>
<div style="display:flex;align-items:center;margin:0.5em 1em;gap:2em;max-width:120ch;justify-content:space-between;">
<label>Image to apply overlay
<input type="file" id="fileDrop" onchange="onFileSelected(event)"></label>
<a href="" class="btn" disabled="true" id="download">Download</a>
</div>
<div class="Purple" id="my-node">
<img id="image" src="/img/Example_Image.jpg">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
var node = document.getElementById('my-node');
function convertImage(event) {
domtoimage.toJpeg(document.getElementById('my-node'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.getElementById('download');
link.download = 'colored-image.jpg';
link.href = dataUrl;
});
}
document.querySelectorAll("input[name='color']").forEach((input) => {
input.addEventListener("change", changeColor);
});
function changeColor(event) {
var selectedColor = event.target.value;
var node = document.getElementById('my-node');
node.classList = selectedColor;
convertImage();
}
function onFileSelected(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
var imgtag = document.getElementById("image");
var button = document.getElementById("download");
imgtag.title = selectedFile.name;
reader.onload = function(event) {
imgtag.src = event.target.result;
convertImage();
button.removeAttribute('disabled');
};
reader.readAsDataURL(selectedFile);
}
var constrastpicker = document.querySelector("#contrast");
constrastpicker.addEventListener("change", e => {
document.documentElement.style.setProperty('--contrast', e.target.value);
})
var opacitypicker = document.querySelector("#opacity");
opacitypicker.addEventListener("change", e => {
document.documentElement.style.setProperty('--opacity', e.target.value / 100);
})
</script>
</body>
No notes defined.