{"id":927,"date":"2024-05-09T19:20:49","date_gmt":"2024-05-09T19:20:49","guid":{"rendered":"https:\/\/worldseotool.com\/?page_id=927"},"modified":"2024-05-09T19:20:49","modified_gmt":"2024-05-09T19:20:49","slug":"image-cropping-tool","status":"publish","type":"page","link":"https:\/\/shoptips24.com\/tools\/image-cropping-tool\/","title":{"rendered":"Image Cropping Tool"},"content":{"rendered":"\n\n<style>\n    body {\n        font-family: Arial, sans-serif;\n        margin: 0;\n        padding: 20px;\n    }\n    #imageContainer, #croppedImageContainer {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        margin-top: 20px;\n    }\n    img {\n        max-width: 100%;\n        margin-bottom: 10px;\n    }\n    button {\n        padding: 10px 20px;\n        background-color: #007bff;\n        color: #fff;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n    label {\n        margin-right: 10px;\n    }\n    select {\n        padding: 5px;\n        border-radius: 5px;\n    }\n<\/style>\n<\/head>\n<body>\n\n<input type=\"file\" accept=\"image\/*\" id=\"imageInput\" style=\"display: none;\">\n<button onclick=\"document.getElementById('imageInput').click();\">Upload Image<\/button>\n\n<div id=\"imageContainer\" style=\"display: none;\">\n    <img id=\"uploadedImage\">\n    <div>\n        <label for=\"aspectRatio\">Cropping Size:<\/label>\n        <select id=\"aspectRatio\">\n            <option value=\"NaN\">Free<\/option>\n            <option value=\"1\">Square<\/option>\n            <option value=\"16\/9\">16:9<\/option>\n            <option value=\"4\/3\">4:3<\/option>\n        <\/select>\n    <\/div>\n    <button onclick=\"openCroppingTool()\">Crop Image<\/button>\n<\/div>\n\n<div id=\"croppingTool\" style=\"display: none;\">\n    <div>\n        <label>Preview:<\/label>\n        <div id=\"cropperPreview\" style=\"max-width: 400px;\"><\/div>\n    <\/div>\n    <div>\n        <button onclick=\"cropImage()\">Apply Crop<\/button>\n        <button onclick=\"cancelCrop()\">Cancel<\/button>\n    <\/div>\n<\/div>\n\n<div id=\"croppedImageContainer\" style=\"display: none;\">\n    <img id=\"croppedImage\">\n    <button onclick=\"downloadCroppedImage()\">Download Cropped Image<\/button>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.12\/cropper.min.js\"><\/script>\n<script>\n    var cropper;\n\n    function openCroppingTool() {\n        document.getElementById('imageContainer').style.display = 'none';\n        document.getElementById('croppingTool').style.display = 'block';\n        var aspectRatio = document.getElementById('aspectRatio').value;\n        cropper = new Cropper(document.getElementById('uploadedImage'), {\n            aspectRatio: aspectRatio,\n            viewMode: 1,\n        });\n    }\n\n    function cropImage() {\n        var croppedCanvas = cropper.getCroppedCanvas();\n        var croppedImage = document.getElementById('croppedImage');\n        croppedImage.src = croppedCanvas.toDataURL();\n        document.getElementById('croppingTool').style.display = 'none';\n        document.getElementById('croppedImageContainer').style.display = 'block';\n    }\n\n    function cancelCrop() {\n        document.getElementById('croppingTool').style.display = 'none';\n        document.getElementById('imageContainer').style.display = 'block';\n    }\n\n    function downloadCroppedImage() {\n        var croppedImage = document.getElementById('croppedImage');\n        var downloadLink = document.createElement('a');\n        downloadLink.href = croppedImage.src;\n        downloadLink.download = 'cropped_image.png';\n        downloadLink.click();\n    }\n\n    document.getElementById('imageInput').addEventListener('change', function(event) {\n        var input = event.target;\n        var reader = new FileReader();\n        reader.onload = function() {\n            var img = document.createElement('img');\n            img.src = reader.result;\n            img.onload = function() {\n                document.getElementById('uploadedImage').src = img.src;\n                document.getElementById('imageContainer').style.display = 'block';\n            };\n        };\n        reader.readAsDataURL(input.files[0]);\n    });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Upload Image Cropping Size: FreeSquare16:94:3 Crop Image Preview: Apply Crop Cancel Download Cropped Image<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-927","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages\/927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/comments?post=927"}],"version-history":[{"count":0,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages\/927\/revisions"}],"wp:attachment":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/media?parent=927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}