Javascript Canvas API Project to Blur or Hide Sections of Image Web App in Browser

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Blur App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .preview-image {
            max-width: 100%;
            max-height: 400px;
            margin-top: 20px;
            transition: filter 0.3s ease;
        }
    </style>
</head>
<body class="bg-light p-5">

    <div class="container">
        <div class="card mx-auto p-4 shadow" style="max-width: 500px;">
            <h1 class="text-center fs-3 fw-bold mb-4">Image Blur App</h1>

            <div class="mb-3">
                <input type="file" id="image-input" accept="image/*" class="form-control" required>
            </div>

            <div class="mb-3">
                <label for="blur-slider" class="form-label">Blur Level:</label>
                <input type="range" id="blur-slider" class="form-range" min="0" max="20" value="0">
                <div id="blur-value" class="text-center">Blur: 0px</div>
            </div>

            <div class="text-center">
                <img id="preview-image" class="preview-image" src="" alt="Preview Image" hidden>
            </div>

            <div class="d-grid">
                <a id="download-button" class="btn btn-success mt-4 d-none" download="blurred_image.png">
                    Download Blurred Image
                </a>
            </div>
        </div>
    </div>

    <canvas id="canvas" style="display: none;"></canvas>

    <script>
        const imageInput = document.getElementById('image-input');
        const blurSlider = document.getElementById('blur-slider');
        const previewImage = document.getElementById('preview-image');
        const blurValueText = document.getElementById('blur-value');
        const downloadButton = document.getElementById('download-button');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        imageInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    previewImage.hidden = false; // Show the preview image
                    updateBlur(); // Update blur effect
                };
                reader.readAsDataURL(file);
            }
        });

        blurSlider.addEventListener('input', () => {
            blurValueText.textContent = `Blur: ${blurSlider.value}px`;
            updateBlur(); // Update blur effect
        });

        function updateBlur() {
            const blurValue = blurSlider.value;
            previewImage.style.filter = `blur(${blurValue}px)`;

            // Draw the blurred image to the canvas
            drawToCanvas(blurValue);
        }

        function drawToCanvas(blurValue) {
            const img = new Image();
            img.src = previewImage.src;

            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.filter = `blur(${blurValue}px)`;
                ctx.drawImage(img, 0, 0);
                
                // Create a downloadable URL for the blurred image
                const blurredImageURL = canvas.toDataURL('image/png');
                downloadButton.href = blurredImageURL;
                downloadButton.classList.remove('d-none'); // Show the download button
            };
        }
    </script>
</body>
</html>

100

101

<!DOCTYPE html>

<head>

<title>Image Blur App</title>

<style>

.preview-image {

max-width: 100%;

max-height: 400px;

margin-top: 20px;

transition: filter 0.3s ease;

}

</style>

</head>

<h1 class="text-center fs-3 fw-bold mb-4">Image Blur App</h1>

</div>

<label for="blur-slider" class="form-label">Blur Level:</label>

</div>

</div>

Download Blurred Image

</a>

</div>

const imageInput = document.getElementById('image-input');

const blurSlider = document.getElementById('blur-slider');

const previewImage = document.getElementById('preview-image');

const blurValueText = document.getElementById('blur-value');

const downloadButton = document.getElementById('download-button');

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

imageInput.addEventListener('change', (event) => {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(e) {

previewImage.src = e.target.result;

previewImage.hidden = false; // Show the preview image

updateBlur(); // Update blur effect

};

reader.readAsDataURL(file);

}

});

blurSlider.addEventListener('input', () => {

blurValueText.textContent = `Blur: ${blurSlider.value}px`;

updateBlur(); // Update blur effect

});

function updateBlur() {

const blurValue = blurSlider.value;

previewImage.style.filter = `blur(${blurValue}px)`;

// Draw the blurred image to the canvas

drawToCanvas(blurValue);

}

function drawToCanvas(blurValue) {

const img = new Image();

img.src = previewImage.src;

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.filter = `blur(${blurValue}px)`;

ctx.drawImage(img, 0, 0);

// Create a downloadable URL for the blurred image

const blurredImageURL = canvas.toDataURL('image/png');

downloadButton.href = blurredImageURL;

downloadButton.classList.remove('d-none'); // Show the download button

};

}

</script>

</body>

</html>

Javascript Canvas API Project to Blur or Hide Sections of Image Web App in Browser

Comments

Leave a Reply Cancel reply

Archives