{"id":139,"date":"2024-07-05T16:33:13","date_gmt":"2024-07-05T15:33:13","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=139"},"modified":"2025-03-13T04:38:44","modified_gmt":"2025-03-13T04:38:44","slug":"image-flipper","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/image-flipper\/","title":{"rendered":"Image Flipper"},"content":{"rendered":"\n<p>The Image Flipper allows you to easily flip images horizontally or vertically. Simply upload an image, flip it using the provided buttons, and save or copy the flipped image.<\/p>\n\n\n\n<div id=\"image-flipper\">\n    <style>\n        \/* Reset all styles for this container *\/\n        #image-flipper {\n            all: unset;\n            display: block;\n        }\n\n        \/* Reapply custom styles *\/\n        #image-flipper * {\n            all: revert;\n        }\n\n        \/* Apply custom styles *\/\n        #image-flipper body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #f0f0f0;\n            margin: 0;\n            flex-direction: column;\n            padding: 20px;\n        }\n\n        #image-flipper .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: 600px;\n            margin: 20px 0;\n        }\n\n        #image-flipper #dropArea {\n            border: 2px dashed #ccc;\n            border-radius: 8px;\n            padding: 20px;\n            cursor: pointer;\n            margin-bottom: 20px;\n            position: relative;\n        }\n\n        #image-flipper #dropArea.dragover {\n            background-color: #f0f0f0;\n        }\n\n        #image-flipper input[type=\"file\"] {\n            display: none;\n        }\n\n        #image-flipper button {\n            padding: 10px;\n            border: none;\n            border-radius: 4px;\n            background-color: lightgrey;\n            color: black;\n            cursor: pointer;\n            margin: 5px;\n        }\n\n        #image-flipper button:hover {\n            background-color: grey;\n        }\n\n        #image-flipper #selectFileBtn {\n            margin-top: 10px;\n            padding: 10px;\n        }\n\n        #image-flipper #canvas {\n            border: 1px solid #ccc;\n            margin-top: 20px;\n            max-width: 100%;\n        }\n\n        @media (max-width: 600px) {\n            #image-flipper .container {\n                padding: 10px;\n            }\n\n            #image-flipper button {\n                padding: 8px;\n                margin: 4px;\n            }\n\n            #image-flipper #selectFileBtn {\n                padding: 8px;\n            }\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <div id=\"dropArea\">\n            <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n            <p>Drag and drop your image here or click to upload.<\/p>\n            <button id=\"selectFileBtn\">Select File<\/button>\n        <\/div>\n        <button id=\"flipHorizontalBtn\">Flip Horizontal<\/button>\n        <button id=\"flipVerticalBtn\">Flip Vertical<\/button>\n        <button id=\"clearBtn\">Clear<\/button>\n        <canvas id=\"canvas\"><\/canvas>\n        <button id=\"copyBtn\">Copy Image<\/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 selectFileBtn = document.getElementById('selectFileBtn');\n            const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\n            const flipVerticalBtn = document.getElementById('flipVerticalBtn');\n            const clearBtn = document.getElementById('clearBtn');\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 currentImage = null;\n            let flippedHorizontal = false;\n            let flippedVertical = false;\n\n            imageInput.addEventListener('change', handleImageUpload);\n            dropArea.addEventListener('dragover', handleDragOver);\n            dropArea.addEventListener('drop', handleDrop);\n            selectFileBtn.addEventListener('click', () => imageInput.click());\n            flipHorizontalBtn.addEventListener('click', flipImageHorizontal);\n            flipVerticalBtn.addEventListener('click', flipImageVertical);\n            clearBtn.addEventListener('click', clearImage);\n            copyBtn.addEventListener('click', copyImage);\n            saveBtn.addEventListener('click', saveImage);\n\n            function handleImageUpload(event) {\n                const file = event.target.files[0];\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    const img = new Image();\n                    img.onload = function() {\n                        currentImage = img;\n                        flippedHorizontal = false;\n                        flippedVertical = false;\n                        drawImage();\n                    };\n                    img.src = e.target.result;\n                };\n                reader.readAsDataURL(file);\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                imageInput.files = event.dataTransfer.files;\n                handleImageUpload({ target: { files: [file] } });\n            }\n\n            function drawImage() {\n                if (!currentImage) return;\n                const width = currentImage.width;\n                const height = currentImage.height;\n                canvas.width = width;\n                canvas.height = height;\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                ctx.save();\n                ctx.translate(width \/ 2, height \/ 2);\n                ctx.scale(flippedHorizontal ? -1 : 1, flippedVertical ? -1 : 1);\n                ctx.drawImage(currentImage, -width \/ 2, -height \/ 2, width, height);\n                ctx.restore();\n            }\n\n            function flipImageHorizontal() {\n                flippedHorizontal = !flippedHorizontal;\n                drawImage();\n            }\n\n            function flipImageVertical() {\n                flippedVertical = !flippedVertical;\n                drawImage();\n            }\n\n            function clearImage() {\n                currentImage = null;\n                flippedHorizontal = false;\n                flippedVertical = false;\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                canvas.width = canvas.height = 0;\n            }\n\n            function copyImage() {\n                if (!navigator.clipboard) {\n                    alert('Clipboard API not supported.');\n                    return;\n                }\n\n                canvas.toBlob(blob => {\n                    if (!blob) {\n                        alert('Failed to create image blob.');\n                        return;\n                    }\n                    const item = new ClipboardItem({ 'image\/png': blob });\n                    navigator.clipboard.write([item]).then(() => {\n                        alert('Image copied to clipboard!');\n                    }).catch(err => {\n                        if (err.name === \"NotAllowedError\") {\n                            alert('Clipboard access denied. This feature may not be supported in your browser or platform.');\n                        } else {\n                            alert('Failed to copy image: ' + err);\n                        }\n                    });\n                });\n            }\n\n            function saveImage() {\n                const link = document.createElement('a');\n                link.download = 'flipped-image.png';\n                link.href = canvas.toDataURL('image\/png');\n                link.click();\n            }\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Image Flipper allows you to easily flip images horizontally or vertically. Simply upload an image, flip it using the provided buttons, and save or copy the flipped image. Drag and drop your image here or click to upload. Select File Flip Horizontal Flip Vertical Clear Copy Image Save Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-139","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":2,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions\/160"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}