Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Save an HTML Element With Filters to an Image?
The filter property in CSS allows you to apply visual effects like blur, brightness, contrast, and sepia to HTML elements. When combined with the HTML5 Canvas API, you can capture these filtered elements and save them as downloadable images.
Syntax
Following is the syntax for the CSS filter property
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Following is the syntax for the HTML img tag
<img src="image-url" alt="description" width="width" height="height">
How It Works
To save an HTML element with filters to an image, we use the following process
Canvas Element Create an HTML5 canvas to draw and manipulate the image
Canvas Context Get the 2D rendering context to apply filters
Filter Application Apply CSS filters using the
ctx.filterpropertyImage Drawing Draw the original image onto the canvas with filters applied
Data URL Conversion Convert the canvas content to a downloadable image format
Basic Example with Sepia Filter
Following example demonstrates saving an image with a sepia filter applied
<!DOCTYPE html>
<html>
<head>
<title>Save Image with Sepia Filter</title>
<style>
img { width: 300px; height: 200px; }
canvas { border: 1px solid #ccc; margin: 10px 0; }
button { padding: 10px 15px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Original Image</h3>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" id="originalImg" />
<h3>Filtered Image (Canvas)</h3>
<canvas id="canvas" width="300" height="200"></canvas>
<br>
<button id="downloadBtn">Download Sepia Image</button>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('originalImg');
img.onload = function() {
ctx.filter = "sepia(80%)";
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
document.getElementById('downloadBtn').addEventListener('click', function() {
var dataURL = canvas.toDataURL('image/jpeg');
var link = document.createElement('a');
link.download = 'sepia-image.jpg';
link.href = dataURL;
link.click();
});
</script>
</body>
</html>
The output displays the original image and a canvas with the sepia filter applied. Clicking the download button saves the filtered image
Original Image: [Java logo in normal colors] Filtered Image: [Java logo with sepia/vintage effect] [Download Sepia Image] button
Multiple Filter Effects
You can combine multiple filters for more dramatic effects. Following example applies blur and brightness filters together
<!DOCTYPE html>
<html>
<head>
<title>Multiple Filters Example</title>
<style>
.container { display: flex; gap: 20px; align-items: start; }
canvas { border: 1px solid #ddd; }
.controls { display: flex; flex-direction: column; gap: 10px; }
button { padding: 8px 12px; background: #28a745; color: white; border: none; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Image with Multiple Filters</h3>
<div class="container">
<div>
<canvas id="multiCanvas" width="250" height="180"></canvas>
</div>
<div class="controls">
<button onclick="applyBlur()">Apply Blur</button>
<button onclick="applyGrayscale()">Apply Grayscale</button>
<button onclick="applyBrightness()">Apply Brightness</button>
<button onclick="downloadFiltered()">Download Image</button>
</div>
</div>
<script>
var canvas = document.getElementById('multiCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://www.tutorialspoint.com/java/images/java-mini-logo.jpg';
img.onload = function() {
drawImage();
};
function drawImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
function applyBlur() {
ctx.filter = "blur(3px)";
drawImage();
}
function applyGrayscale() {
ctx.filter = "grayscale(100%)";
drawImage();
}
function applyBrightness() {
ctx.filter = "brightness(150%) contrast(120%)";
drawImage();
}
function downloadFiltered() {
var dataURL = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.download = 'filtered-image.png';
link.href = dataURL;
link.click();
}
</script>
</body>
</html>
This example allows you to dynamically apply different filters and download the result. The canvas updates in real-time when filters are applied.
Interactive Filter Controls
Following example provides slider controls to adjust filter values interactively
<!DOCTYPE html>
<html>
<head>
<title>Interactive Filter Controls</title>
<style>
.filter-controls { margin: 15px 0; }
.filter-controls label { display: inline-block; width: 100px; }
.filter-controls input { width: 200px; margin: 0 10px; }
canvas { border: 2px solid #333; margin: 10px 0; }
#downloadBtn { padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Interactive Image Filters</h3>
<div class="filter-controls">
<label>Brightness:</label>
<input type="range" id="brightness" min="0" max="200" value="100">
<span id="brightnessValue">100%</span>
</div>
<div class="filter-controls">
<label>Contrast:</label>
<input type="range" id="contrast" min="0" max="200" value="100">
<span id="contrastValue">100%</span>
</div>
<div class="filter-controls">
<label>Saturation:</label>
<input type="range" id="saturation" min="0" max="200" value="100">
<span id="saturationValue">100%</span>
</div>
<canvas id="interactiveCanvas" width="300" height="200"></canvas>
<br>
<button id="downloadBtn">Save Filtered Image</button>
<script>
var canvas = document.getElementById('interactiveCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://www.tutorialspoint.com/java/images/java-mini-logo.jpg';
var brightness = document.getElementById('brightness');
var contrast = document.getElementById('contrast');
var saturation = document.getElementById('saturation');
img.onload = function() {
updateFilters();
};
function updateFilters() {
var brightnessVal = brightness.value;
var contrastVal = contrast.value;
var saturationVal = saturation.value;
document.getElementById('brightnessValue').textContent = brightnessVal + '%';
document.getElementById('contrastValue').textContent = contrastVal + '%';
document.getElementById('saturationValue').textContent = saturationVal + '%';
ctx.filter = `brightness(${brightnessVal}%) contrast(${contrastVal}%) saturate(${saturationVal}%)`;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
brightness.addEventListener('input', updateFilters);
contrast.addEventListener('input', updateFilters);
saturation.addEventListener('input', updateFilters);
document.getElementById('downloadBtn').addEventListener('click', function() {
var dataURL = canvas.toDataURL('image/jpeg');
var link = document.createElement('a');
link.download = 'custom-filtered-image.jpg';
link.href = dataURL;
link.click();
});
</script>
</body>
</html>
The sliders allow real-time adjustment of brightness, contrast, and saturation. The filtered result can be downloaded as a JPEG image.
Updated on: 2026-03-16T21:38:54+05:30
986 Views
Advertisements