{"id":358,"date":"2024-06-17T17:46:54","date_gmt":"2024-06-17T16:46:54","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=358"},"modified":"2024-07-10T06:49:19","modified_gmt":"2024-07-10T05:49:19","slug":"photo-filters","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/photo-filters\/","title":{"rendered":"Photo Filters (Desktop Only)"},"content":{"rendered":"\n<p>The Photo Filters tool lets you apply various filters to your photos to enhance them quickly and easily.<\/p>\n\n\n\n<p>Note: Functionality stable on Desktop (Windows) at this time. Tested on iOS (Safari &amp; Chrome) with lackluster results. Please use on desktop only until otherwise stated here. <\/p>\n\n\n\n<p><strong>Use Cases:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Social Media<\/strong>: Enhance photos before posting.<\/li>\n\n\n\n<li><strong>Graphic Design<\/strong>: Apply filters to images for design projects.<\/li>\n\n\n\n<li><strong>Personal Use<\/strong>: Improve your personal photos.<\/li>\n<\/ol>\n\n\n\n<div id=\"photo-filters\">\n    <style>\n        \/* Reset all styles for this container *\/\n        #photo-filters {\n            all: unset;\n            display: block;\n        }\n\n        \/* Reapply custom styles *\/\n        #photo-filters * {\n            all: revert;\n        }\n\n        \/* Apply custom styles *\/\n        #photo-filters body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            background-color: #f0f0f0;\n            margin: 0;\n            flex-direction: column;\n        }\n\n\n        .site-header .header-image {\n      display: flex;\n      justify-content: flex-start;\n      width: 100px;\n      max-width: 100%; \/* Ensure the logo scales properly *\/\n      height: 100px;\n     }\n\n\n        #photo-filters .container {\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            text-align: center;\n            width: 100%;\n            max-width: 400px;\n        }\n\n        #photo-filters .slider-group {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n            margin-bottom: 15px;\n        }\n\n        #photo-filters .slider-group label {\n            display: block;\n            margin-bottom: 5px;\n        }\n\n        #photo-filters .slider-group input {\n            width: 100%;\n        }\n\n        #photo-filters canvas {\n            display: none;\n            margin-top: 20px;\n            border: 1px solid #ccc;\n            max-width: 100%;\n        }\n\n        #photo-filters #dropArea {\n            border: 2px dashed #ccc;\n            border-radius: 8px;\n            padding: 20px;\n            cursor: pointer;\n            margin-bottom: 20px;\n        }\n\n        #photo-filters #dropArea.dragover {\n            background-color: #f0f0f0;\n        }\n\n        #photo-filters button {\n            padding: 10px;\n            border: none;\n            border-radius: 4px;\n            background-color: lightgrey;\n            color: black;\n            cursor: pointer;\n            margin-top: 10px;\n            width: 100%;\n        }\n\n        #photo-filters button:hover {\n            background-color: grey;\n        }\n\n        #photo-filters button#clearBtn {\n            background-color: #dc3545;\n            color: white;\n        }\n\n        #photo-filters button#clearBtn:hover {\n            background-color: #c82333;\n        }\n\n        #photo-filters button#resetFiltersBtn {\n            background-color: #007bff;\n            color: white;\n        }\n\n        #photo-filters button#resetFiltersBtn:hover {\n            background-color: #0069d9;\n        }\n\n        #photo-filters button#copyBtn {\n            background-color: #28a745;\n            color: white;\n        }\n\n        #photo-filters button#copyBtn:hover {\n            background-color: #218838;\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <h1>Photo Filters<\/h1>\n        <p>Upload an image and apply various filters to it.<\/p>\n        <div id=\"dropArea\">\n            <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n            <p id=\"dropAreaText\">No file selected<\/p>\n        <\/div>\n        <button id=\"clearBtn\">Clear<\/button>\n        <button id=\"resetFiltersBtn\">Reset Filters<\/button>\n        <div class=\"slider-group\">\n            <label for=\"brightness\">Brightness: <span id=\"brightnessValue\">100%<\/span><\/label>\n            <input type=\"range\" id=\"brightness\" min=\"0\" max=\"200\" value=\"100\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"contrast\">Contrast: <span id=\"contrastValue\">100%<\/span><\/label>\n            <input type=\"range\" id=\"contrast\" min=\"0\" max=\"200\" value=\"100\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"saturate\">Saturate: <span id=\"saturateValue\">100%<\/span><\/label>\n            <input type=\"range\" id=\"saturate\" min=\"0\" max=\"200\" value=\"100\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"grayscale\">Grayscale: <span id=\"grayscaleValue\">0%<\/span><\/label>\n            <input type=\"range\" id=\"grayscale\" min=\"0\" max=\"100\" value=\"0\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"sepia\">Sepia: <span id=\"sepiaValue\">0%<\/span><\/label>\n            <input type=\"range\" id=\"sepia\" min=\"0\" max=\"100\" value=\"0\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"invert\">Invert: <span id=\"invertValue\">0%<\/span><\/label>\n            <input type=\"range\" id=\"invert\" min=\"0\" max=\"100\" value=\"0\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"hueRotate\">Hue Rotate: <span id=\"hueRotateValue\">0deg<\/span><\/label>\n            <input type=\"range\" id=\"hueRotate\" min=\"0\" max=\"360\" value=\"0\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"blur\">Blur: <span id=\"blurValue\">0px<\/span><\/label>\n            <input type=\"range\" id=\"blur\" min=\"0\" max=\"10\" value=\"0\">\n        <\/div>\n        <div class=\"slider-group\">\n            <label for=\"opacity\">Opacity: <span id=\"opacityValue\">100%<\/span><\/label>\n            <input type=\"range\" id=\"opacity\" min=\"0\" max=\"100\" value=\"100\">\n        <\/div>\n        <canvas id=\"canvas\"><\/canvas>\n        <button id=\"copyBtn\">Copy to Clipboard<\/button>\n        <button id=\"saveBtn\">Save Image<\/button>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const imageInput = document.getElementById('imageInput');\n            const dropArea = document.getElementById('dropArea');\n            const dropAreaText = document.getElementById('dropAreaText');\n            const clearBtn = document.getElementById('clearBtn');\n            const resetFiltersBtn = document.getElementById('resetFiltersBtn');\n            const copyBtn = document.getElementById('copyBtn');\n            const saveBtn = document.getElementById('saveBtn');\n            const canvas = document.getElementById('canvas');\n            const ctx = canvas.getContext('2d');\n            let originalImage = null;\n\n            imageInput.addEventListener('change', handleImageUpload);\n            dropArea.addEventListener('dragover', handleDragOver);\n            dropArea.addEventListener('drop', handleDrop);\n            clearBtn.addEventListener('click', clearImage);\n            resetFiltersBtn.addEventListener('click', resetFilters);\n            copyBtn.addEventListener('click', copyToClipboard);\n            saveBtn.addEventListener('click', saveImage);\n\n            document.getElementById('brightness').addEventListener('input', applyFilters);\n            document.getElementById('contrast').addEventListener('input', applyFilters);\n            document.getElementById('saturate').addEventListener('input', applyFilters);\n            document.getElementById('grayscale').addEventListener('input', applyFilters);\n            document.getElementById('sepia').addEventListener('input', applyFilters);\n            document.getElementById('invert').addEventListener('input', applyFilters);\n            document.getElementById('hueRotate').addEventListener('input', applyFilters);\n            document.getElementById('blur').addEventListener('input', applyFilters);\n            document.getElementById('opacity').addEventListener('input', applyFilters);\n\n            function handleImageUpload(event) {\n                const file = event.target.files[0];\n                processFile(file);\n                dropAreaText.textContent = file ? `File selected: ${file.name}` : 'No file selected';\n            }\n\n            function handleDragOver(event) {\n                event.preventDefault();\n                dropArea.classList.add('dragover');\n            }\n\n            function handleDrop(event) {\n                event.preventDefault();\n                dropArea.classList.remove('dragover');\n                const file = event.dataTransfer.files[0];\n                processFile(file);\n                dropAreaText.textContent = file ? `File selected: ${file.name}` : 'No file selected';\n            }\n\n            function processFile(file) {\n                if (file) {\n                    const reader = new FileReader();\n                    reader.onload = function (e) {\n                        const img = new Image();\n                        img.onload = function () {\n                            originalImage = img;\n                            canvas.width = img.width;\n                            canvas.height = img.height;\n                            ctx.drawImage(img, 0, 0);\n                            canvas.style.display = 'block';\n                        };\n                        img.src = e.target.result;\n                    };\n                    reader.readAsDataURL(file);\n                }\n            }\n\n            function applyFilters() {\n                if (originalImage) {\n                    const brightness = document.getElementById('brightness').value;\n                    const contrast = document.getElementById('contrast').value;\n                    const saturate = document.getElementById('saturate').value;\n                    const grayscale = document.getElementById('grayscale').value;\n                    const sepia = document.getElementById('sepia').value;\n                    const invert = document.getElementById('invert').value;\n                    const hueRotate = document.getElementById('hueRotate').value;\n                    const blur = document.getElementById('blur').value;\n                    const opacity = document.getElementById('opacity').value;\n\n                    document.getElementById('brightnessValue').textContent = `${brightness}%`;\n                    document.getElementById('contrastValue').textContent = `${contrast}%`;\n                    document.getElementById('saturateValue').textContent = `${saturate}%`;\n                    document.getElementById('grayscaleValue').textContent = `${grayscale}%`;\n                    document.getElementById('sepiaValue').textContent = `${sepia}%`;\n                    document.getElementById('invertValue').textContent = `${invert}%`;\n                    document.getElementById('hueRotateValue').textContent = `${hueRotate}deg`;\n                    document.getElementById('blurValue').textContent = `${blur}px`;\n                    document.getElementById('opacityValue').textContent = `${opacity}%`;\n\n                    ctx.filter = `\n                        brightness(${brightness}%)\n                        contrast(${contrast}%)\n                        saturate(${saturate}%)\n                        grayscale(${grayscale}%)\n                        sepia(${sepia}%)\n                        invert(${invert}%)\n                        hue-rotate(${hueRotate}deg)\n                        blur(${blur}px)\n                        opacity(${opacity}%)\n                    `;\n                    ctx.drawImage(originalImage, 0, 0);\n                }\n            }\n\n            function clearImage() {\n                originalImage = null;\n                canvas.width = 500;\n                canvas.height = 500;\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                dropAreaText.textContent = 'No file selected';\n                canvas.style.display = 'none';\n                resetFilters();\n            }\n\n            function resetFilters() {\n                document.getElementById('brightness').value = 100;\n                document.getElementById('contrast').value = 100;\n                document.getElementById('saturate').value = 100;\n                document.getElementById('grayscale').value = 0;\n                document.getElementById('sepia').value = 0;\n                document.getElementById('invert').value = 0;\n                document.getElementById('hueRotate').value = 0;\n                document.getElementById('blur').value = 0;\n                document.getElementById('opacity').value = 100;\n                applyFilters();\n            }\n\n            function copyToClipboard() {\n                canvas.toBlob(blob => {\n                    const item = new ClipboardItem({ \"image\/png\": blob });\n                    navigator.clipboard.write([item]).then(() => {\n                        alert('Image copied to clipboard!');\n                    });\n                });\n            }\n\n            function saveImage() {\n                const link = document.createElement('a');\n                link.href = canvas.toDataURL('image\/png');\n                link.download = 'filtered-image.png';\n                link.click();\n            }\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Photo Filters tool lets you apply various filters to your photos to enhance them quickly and easily. Note: Functionality stable on Desktop (Windows) at this time. Tested on iOS (Safari &amp; Chrome) with lackluster results. Please use on desktop only until otherwise stated here. Use Cases: Photo Filters Upload an image and apply various &#8230; <a title=\"Photo Filters (Desktop Only)\" class=\"read-more\" href=\"https:\/\/divbydev.com\/index.php\/projects-2\/photo-filters\/\" aria-label=\"Read more about Photo Filters (Desktop Only)\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-358","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":12,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":494,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/358\/revisions\/494"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}