There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confusing.
Therefore, my question consists of two parts:
Considering that some of these answers are outdated, has there been a method developed to save a canvas image with CSS filters applied?
If not, how can I implement the strategies outlined in one of these stackoverflow responses? Specifically, I require a code example demonstrating the application of multiple filters to the image or pixels, which was lacking in the original responses.
Thank you.
Answers:
I found myself puzzled by the ambiguity in the loop in the first answer and the lack of detail in step 4 of the second answer. Both responses appear to utilize CSS3 filters, which is my preferred approach: Capture/save/export an image with CSS filter effects applied
I struggled with step 3 in this response: is anyone solve about saving filtered canvas as an image?
Similarly, I faced challenges understanding the implementation of non-CSS filters in this response: How to save image from canvas with css filters
JavaScript:
// The global variables will eventually need to be passed as parameters.
var image;
var c;
var context;
var file;
// Start File Open Code.
function fileOpen()
{
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('iDisplay');
fileInput.addEventListener('change', function(e)
{
file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e)
{
iDisplay.innerHTML = "";
image = new Image();
image.src = reader.result;
image.id = "I";
iDisplay.appendChild(image);
image.onload = function()
{
c = document.getElementById("C");
context = c.getContext("2d");
c.width = image.width;
c.height = image.height;
context.drawImage(image,0,0);
}
}
reader.readAsDataURL(file);
}
else
{
iDisplay.innerHTML = "File type not supported."
}
});
setValues();
}
// End File Open Code
// Start Image Editing Code.
var degrees = 0;
var percentB = 100;
var percentC = 100;
// Set initial values of sliders
function setValues()
{
form1.brightness.value = 100;
form1.contrast.value = 100;
form1.hue.value = 0;
}
// Get slider settings and apply changes to image
function apply()
{
degrees = form1.hue.value;
percentC = form1.contrast.value;
percentB = form1.brightness.value;
if (document.getElementById("C") != null) {
document.getElementById("C").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)";
document.getElementById("C").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)";
}
}
// End Image Editing Code
function setCanvasWidth()
{
c.width = image.width;
}
function setCanvasHeight()
{
c.height = image.height;
}
// Start File Save Code (or user can right click and save if filters get applied.)
function save()
{
alert("Insert file save code here.")
}
HTML
<!doctype html>
<html lang="en">
<head>
<title>HTML5 CSS3 Javascript Image Editor</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="nav.js"></script>
<script type="text/javascript">
// JavaScript included here.
</script>
<!-- Style elements specific to this page are defined within the style tags. -->
<style>
image
{
max-width: 100%;
display: block;
margin: auto;
margin-left: auto;
margin-right: auto;
}
#C
{
max-width: 100%;
display: block;
margin: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#iDisplay
{
margin-top: 2em;
max-width: 100%;
overflow-x: auto;
margin-left: auto;
margin-right: auto;
display: none;
}
</style>
</head>
<body onload="setValues()">
<header>
<a href="index.html"><img src="logoglow.png" alt="Logo Image" width="215" height="135" /></a>
<a href="index.html"><img src="ac.png" alt="Header Image" width="800" height="135" /></a>
</header>
<main>
<h3>A Continuous Exploration of HTML5 / CSS3 / JavaScript Image Editing</h3>
<div>
<p style="float:left;">
<input type="file" id="fileInput" onclick="fileOpen()"></p>
<br style="clear:both">
</div>
<div id="iDisplay"></div>
<br style="clear:both"><br style="clear:both">
<canvas style="color:#FFFFFF;" id="C" width="javascript:setCanvasWidth()" height="javascript:setCanvasHeight()">Your browser does not support this feature.<br>Please consider updating to a modern browser.</canvas>
<div id="afterCanvas">
<br><br>
<form name="form1" id="form1id" action="javascript:save();" style="font-size:90%; text-align:center;">
Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;" />
Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;"/>
Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;"/>
<br><br>
<input type="submit" style="float:left;" value="Save Changes" />
</form>
</div>
</main>
</body>
</html>