Creating an image enhancer using Laravel involves setting up a Laravel project to handle image upload and processing. We’ll use JavaScript for the frontend to provide a user interface for selecting and applying enhancements. Here’s a step-by-step guide:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<title>Image Enhancer</title>
</head>
<body>
<div class="container p-3 card">
<div class="row">
<div class="col-md-6">
<h3>Image Enhancer</h3>
<input type="file" id="imageUpload" accept="image/*" class="form-control">
<hr/>
<canvas id="imageCanvas" style="border:1px solid #f2f2f2; box-shadow:0px 0px 2px 5px #f7f7f7; height:400px; width:auto"></canvas>
</div>
<div class="col-md-6">
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" min="0" max="2" step="0.01" value="1">
<label for="contrast">Contrast:</label>
<input type="range" id="contrast" min="0" max="2" step="0.01" value="1">
<button id="downloadButton" class="btn btn-warning">Download Image</button>
</div>
</div>
</div>
<script>
// draw image on canvas
document.getElementById('imageUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the image
canvas.width = img.width;
canvas.height = img.height;
// Draw the image on the canvas
ctx.drawImage(img, 0, 0);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
});
// download image on btn click
document.getElementById('downloadButton').addEventListener('click', function() {
const canvas = document.getElementById('imageCanvas');
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'canvas-image.png';
link.click();
});
// enhance image using javascript
let img = new Image();
let canvas = document.getElementById('imageCanvas');
let ctx = canvas.getContext('2d');
let brightness = 1;
let contrast = 1;
document.getElementById('imageUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
img.onload = function() {
drawImageWithFilters();
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
});
document.getElementById('brightness').addEventListener('input', function(event) {
brightness = event.target.value;
drawImageWithFilters();
});
document.getElementById('contrast').addEventListener('input', function(event) {
contrast = event.target.value;
drawImageWithFilters();
});
document.getElementById('downloadButton').addEventListener('click', function() {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'canvas-image.png';
link.click();
});
function drawImageWithFilters() {
canvas.width = img.width;
canvas.height = img.height;
ctx.filter = `brightness(${brightness}) contrast(${contrast})`;
ctx.drawImage(img, 0, 0);
}
</script>
</body>
</html>
