{"id":133,"date":"2024-07-05T16:22:33","date_gmt":"2024-07-05T15:22:33","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=133"},"modified":"2025-03-28T06:20:13","modified_gmt":"2025-03-28T06:20:13","slug":"image-rotator","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/image-rotator\/","title":{"rendered":"Image Rotator"},"content":{"rendered":"\n<p>The Image Rotator allows you to easily rotate images to your desired angle. Simply upload an image, rotate it using the provided buttons, and save or copy the rotated image.<\/p>\n\n\n\n<div id=\"image-rotator\">\n    <style>\n        #image-rotator 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-rotator .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-rotator #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-rotator #dropArea.dragover {\n            background-color: #f0f0f0;\n        }\n\n        #image-rotator input[type=\"file\"] {\n            display: none;\n        }\n\n        #image-rotator 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-rotator button:hover {\n            background-color: grey;\n        }\n\n        #image-rotator #selectFileBtn {\n            margin-top: 10px;\n            padding: 10px;\n        }\n\n        #image-rotator #canvas {\n            border: 1px solid #ccc;\n            margin-top: 20px;\n            max-width: 100%;\n        }\n\n        @media (max-width: 600px) {\n            #image-rotator .container {\n                padding: 10px;\n            }\n\n            #image-rotator button {\n                padding: 8px;\n                margin: 4px;\n            }\n\n            #image-rotator #selectFileBtn {\n                padding: 8px;\n            }\n        }\n    <\/style>\n\n    <div class=\"container\">\n    \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=\"rotateLeftBtn\">Rotate Left<\/button>\n        <button id=\"rotateRightBtn\">Rotate Right<\/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 rotateLeftBtn = document.getElementById('rotateLeftBtn');\n            const rotateRightBtn = document.getElementById('rotateRightBtn');\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 currentAngle = 0;\n\n            imageInput.addEventListener('change', handleImageUpload);\n            dropArea.addEventListener('dragover', handleDragOver);\n            dropArea.addEventListener('drop', handleDrop);\n            selectFileBtn.addEventListener('click', () => imageInput.click());\n            rotateLeftBtn.addEventListener('click', () => rotateImage(-45));\n            rotateRightBtn.addEventListener('click', () => rotateImage(45));\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                        currentAngle = 0;\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                const maxDimension = Math.max(width, height);\n                canvas.width = maxDimension;\n                canvas.height = maxDimension;\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                ctx.save();\n                ctx.translate(canvas.width \/ 2, canvas.height \/ 2);\n                ctx.rotate(currentAngle * Math.PI \/ 180);\n                ctx.drawImage(currentImage, -width \/ 2, -height \/ 2);\n                ctx.restore();\n            }\n\n            function rotateImage(angle) {\n                currentAngle += angle;\n                drawImage();\n            }\n\n            function clearImage() {\n                currentImage = null;\n                currentAngle = 0;\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 = 'rotated-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 Rotator allows you to easily rotate images to your desired angle. Simply upload an image, rotate it using the provided buttons, and save or copy the rotated image. Drag and drop your image here or click to upload. Select File Rotate Left Rotate Right 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-133","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/133","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=133"}],"version-history":[{"count":5,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/133\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/133\/revisions\/600"}],"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=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}