<form action="">
<label>Image rendering:</label>
<input type="radio" name="imageRender" id="renderAuto" value="auto" checked="checked" />
<label for="renderAuto">auto</label>
<input type="radio" name="imageRender" id="renderPixelated" value="pixelated" />
<label for="renderPixelated">pixelated</label>
<input type="radio" name="imageRender" id="renderCrisp" value="crisp-edges" />
<label for="renderCrisp">crisp edges</label>
<input type="radio" name="imageRender" id="optimizeContrast" value="-webkit-optimize-contrast" />
<label for="optimizeContrast">-webkit-optimize-contrast</label>
</form>
<img class="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/pixel-art-small.png" alt="" />
Original image:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/pixel-art-small.png" alt="" />
.image {
width: 600px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.-webkit-optimize-contrast {
image-rendering: -webkit-optimize-contrast;
}
input {
margin-bottom: 20px;
}
label {
margin-right: 10px;
padding: 20px 0;
display: inline-block;
}
input + label {
cursor: pointer;
}
body {
padding: 10px 10px;
}
View Compiled
var image = document.querySelector(".image"),
form = document.querySelector("form");
function removeClasses() {
image.className = "image";
}
form.addEventListener("change", function (e) {
var render = e.target.value;
removeClasses();
image.classList.add(render);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.