Image Cropper<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.12\/cropper.min.css\" rel=\"stylesheet\">\n <style>\n #masthead {\n width: 100%;\n }\n \/* Set up a column layout for header, main, and footer *\/\n body {\n font-family: Arial, sans-serif;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n background-color: #f0f0f0;\n margin: 0;\n }\n \n }\n main {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .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 }\n #canvas-container {\n display: none;\n margin-top: 20px;\n }\n \/* Removed drag & drop styling; added an upload button *\/\n #uploadBtn {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #uploadBtn:hover {\n background-color: grey;\n }\n\n #cancelBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #cancelBtn:hover {\n background-color: grey;\n }\n\n #cropBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #cropBtn:hover {\n background-color: grey;\n }\n\n #saveBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #saveBtn:hover {\n background-color: grey;\n }\n\n <\/style>\n<\/head>\n<body>\n <header id=\"masthead\">\n <\/header>\n <main>\n <div class=\"container\">\n <p>Images are processed locally in your browser and are never uploaded or saved.<br><br>\n Use the cropping tool to crop images horizontally, vertically, or diagonally.\n <\/p>\n \n <button id=\"uploadBtn\">Upload Image<\/button>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" style=\"display: none;\">\n <button id=\"cancelBtn\" style=\"display:none;\">Cancel<\/button>\n <div id=\"canvas-container\">\n <img id=\"image\" alt=\"Image to crop\">\n <\/div>\n <button id=\"cropBtn\" style=\"display:none;\">Select Crop<\/button>\n <button id=\"saveBtn\" style=\"display:none;\">Save Image<\/button>\n <\/div>\n <\/main>\n <footer class=\"site-footer\">\n <\/footer>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.12\/cropper.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const uploadBtn = document.getElementById('uploadBtn');\n const imageInput = document.getElementById('imageInput');\n const cancelBtn = document.getElementById('cancelBtn');\n const cropBtn = document.getElementById('cropBtn');\n const saveBtn = document.getElementById('saveBtn');\n const canvasContainer = document.getElementById('canvas-container');\n const imageElement = document.getElementById('image');\n let cropper;\n \n uploadBtn.addEventListener('click', () => {\n imageInput.value = ''; \/\/ Reset file input\n imageInput.click();\n });\n \n imageInput.addEventListener('change', handleFiles);\n \n function handleFiles(e) {\n const file = e.target.files[0];\n if (!file || !file.type.startsWith('image\/')) return;\n \n const reader = new FileReader();\n reader.onload = function(event) {\n imageElement.onload = function() {\n if (cropper) {\n cropper.destroy();\n }\n cropper = new Cropper(imageElement, {\n aspectRatio: NaN,\n viewMode: 1,\n autoCropArea: 1,\n movable: true,\n rotatable: true,\n scalable: true,\n zoomable: true,\n cropBoxResizable: true,\n cropBoxMovable: true\n });\n canvasContainer.style.display = 'block';\n cropBtn.style.display = 'block';\n saveBtn.style.display = 'block';\n }\n imageElement.src = event.target.result;\n }\n reader.readAsDataURL(file);\n cancelBtn.style.display = 'block';\n }\n \n cropBtn.addEventListener('click', () => {\n const croppedCanvas = cropper.getCroppedCanvas();\n imageElement.src = croppedCanvas.toDataURL();\n cropper.destroy();\n cropper = null;\n cropBtn.style.display = 'none';\n });\n \n saveBtn.addEventListener('click', () => {\n let dataUrl;\n if (cropper) {\n dataUrl = cropper.getCroppedCanvas().toDataURL();\n } else {\n dataUrl = imageElement.src;\n }\n const link = document.createElement('a');\n link.href = dataUrl;\n link.download = 'cropped-image.png';\n link.click();\n });\n \n cancelBtn.addEventListener('click', () => {\n imageElement.src = '';\n canvasContainer.style.display = 'none';\n cancelBtn.style.display = 'none';\n cropBtn.style.display = 'none';\n saveBtn.style.display = 'none';\n if (cropper) {\n cropper.destroy();\n cropper = null;\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Crops Images Image Cropper Images are processed locally in your browser and are never uploaded or saved. Use the cropping tool to crop images horizontally, vertically, or diagonally. Upload Image Cancel Select Crop 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-175","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175","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=175"}],"version-history":[{"count":18,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175\/revisions\/266"}],"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=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":175,"date":"2025-03-13T05:17:49","date_gmt":"2025-03-13T05:17:49","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=175"},"modified":"2025-03-22T06:52:17","modified_gmt":"2025-03-22T06:52:17","slug":"image-cropper","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/image-cropper\/","title":{"rendered":"Image Cropper"},"content":{"rendered":"\n

Crops Images<\/p>\n\n\n\n\n\n\n \n \n Image Cropper<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.12\/cropper.min.css\" rel=\"stylesheet\">\n <style>\n #masthead {\n width: 100%;\n }\n \/* Set up a column layout for header, main, and footer *\/\n body {\n font-family: Arial, sans-serif;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n background-color: #f0f0f0;\n margin: 0;\n }\n \n }\n main {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .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 }\n #canvas-container {\n display: none;\n margin-top: 20px;\n }\n \/* Removed drag & drop styling; added an upload button *\/\n #uploadBtn {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #uploadBtn:hover {\n background-color: grey;\n }\n\n #cancelBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #cancelBtn:hover {\n background-color: grey;\n }\n\n #cropBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #cropBtn:hover {\n background-color: grey;\n }\n\n #saveBtn{\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background-color: lightgrey;\n color: black;\n cursor: pointer;\n margin-bottom: 20px;\n }\n #saveBtn:hover {\n background-color: grey;\n }\n\n <\/style>\n<\/head>\n<body>\n <header id=\"masthead\">\n <\/header>\n <main>\n <div class=\"container\">\n <p>Images are processed locally in your browser and are never uploaded or saved.<br><br>\n Use the cropping tool to crop images horizontally, vertically, or diagonally.\n <\/p>\n \n <button id=\"uploadBtn\">Upload Image<\/button>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" style=\"display: none;\">\n <button id=\"cancelBtn\" style=\"display:none;\">Cancel<\/button>\n <div id=\"canvas-container\">\n <img id=\"image\" alt=\"Image to crop\">\n <\/div>\n <button id=\"cropBtn\" style=\"display:none;\">Select Crop<\/button>\n <button id=\"saveBtn\" style=\"display:none;\">Save Image<\/button>\n <\/div>\n <\/main>\n <footer class=\"site-footer\">\n <\/footer>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.12\/cropper.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const uploadBtn = document.getElementById('uploadBtn');\n const imageInput = document.getElementById('imageInput');\n const cancelBtn = document.getElementById('cancelBtn');\n const cropBtn = document.getElementById('cropBtn');\n const saveBtn = document.getElementById('saveBtn');\n const canvasContainer = document.getElementById('canvas-container');\n const imageElement = document.getElementById('image');\n let cropper;\n \n uploadBtn.addEventListener('click', () => {\n imageInput.value = ''; \/\/ Reset file input\n imageInput.click();\n });\n \n imageInput.addEventListener('change', handleFiles);\n \n function handleFiles(e) {\n const file = e.target.files[0];\n if (!file || !file.type.startsWith('image\/')) return;\n \n const reader = new FileReader();\n reader.onload = function(event) {\n imageElement.onload = function() {\n if (cropper) {\n cropper.destroy();\n }\n cropper = new Cropper(imageElement, {\n aspectRatio: NaN,\n viewMode: 1,\n autoCropArea: 1,\n movable: true,\n rotatable: true,\n scalable: true,\n zoomable: true,\n cropBoxResizable: true,\n cropBoxMovable: true\n });\n canvasContainer.style.display = 'block';\n cropBtn.style.display = 'block';\n saveBtn.style.display = 'block';\n }\n imageElement.src = event.target.result;\n }\n reader.readAsDataURL(file);\n cancelBtn.style.display = 'block';\n }\n \n cropBtn.addEventListener('click', () => {\n const croppedCanvas = cropper.getCroppedCanvas();\n imageElement.src = croppedCanvas.toDataURL();\n cropper.destroy();\n cropper = null;\n cropBtn.style.display = 'none';\n });\n \n saveBtn.addEventListener('click', () => {\n let dataUrl;\n if (cropper) {\n dataUrl = cropper.getCroppedCanvas().toDataURL();\n } else {\n dataUrl = imageElement.src;\n }\n const link = document.createElement('a');\n link.href = dataUrl;\n link.download = 'cropped-image.png';\n link.click();\n });\n \n cancelBtn.addEventListener('click', () => {\n imageElement.src = '';\n canvasContainer.style.display = 'none';\n cancelBtn.style.display = 'none';\n cropBtn.style.display = 'none';\n saveBtn.style.display = 'none';\n if (cropper) {\n cropper.destroy();\n cropper = null;\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Crops Images Image Cropper Images are processed locally in your browser and are never uploaded or saved. Use the cropping tool to crop images horizontally, vertically, or diagonally. Upload Image Cancel Select Crop 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-175","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175","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=175"}],"version-history":[{"count":18,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/175\/revisions\/266"}],"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=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}