{"id":25,"date":"2024-03-04T19:37:09","date_gmt":"2024-03-04T19:37:09","guid":{"rendered":"https:\/\/zizya.com\/?p=25"},"modified":"2024-03-04T19:37:10","modified_gmt":"2024-03-04T19:37:10","slug":"post","status":"publish","type":"post","link":"https:\/\/zizya.com\/?p=25","title":{"rendered":"post"},"content":{"rendered":"\n<div id=\"image_cropper_modal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center;\">\n    <form id=\"image_cropper_form\" style=\"background: white; padding: 20px; border-radius: 8px;\">\n        <label for=\"image_file\">Upload Image:<\/label>\n        <input type=\"file\" id=\"image_file\" accept=\"image\/*\" required style=\"margin-bottom: 10px;\">\n\n        <label for=\"aspect_ratio\">Aspect Ratio:<\/label>\n        <input type=\"text\" id=\"aspect_ratio\" value=\"1\" readonly style=\"margin-bottom: 10px;\">\n\n        <label for=\"width\">Width:<\/label>\n        <input type=\"text\" id=\"width\" value=\"300\" style=\"margin-bottom: 10px;\">\n\n        <label for=\"height\">Height:<\/label>\n        <input type=\"text\" id=\"height\" value=\"300\" style=\"margin-bottom: 10px;\">\n\n        <button type=\"button\" id=\"save_cropped_image\" style=\"background: #4CAF50; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer;\">Save Cropped Image<\/button>\n    <\/form>\n\n    <img decoding=\"async\" src=\"\" id=\"cropper_image\" style=\"max-width: 100%; max-height: 80vh;\">\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        var inputFile = document.getElementById('image_file');\n        var cropperImage = document.getElementById('cropper_image');\n        var cropperModal = document.getElementById('image_cropper_modal');\n        var cropper;\n\n        inputFile.addEventListener('change', function () {\n            var file = this.files[0];\n\n            \/\/ Check if a file is selected\n            if (file) {\n                var reader = new FileReader();\n\n                reader.onload = function (e) {\n                    \/\/ Show a simple cropping UI using Cropper.js\n                    cropperModal.style.display = 'flex';\n                    cropperImage.src = e.target.result;\n\n                    cropper = new Cropper(cropperImage, {\n                        aspectRatio: 1, \/\/ Set your desired aspect ratio\n                        crop: function (event) {\n                            \/\/ Handle crop event if needed\n                        }\n                    });\n                };\n\n                reader.readAsDataURL(file);\n            }\n        });\n\n        document.getElementById('save_cropped_image').addEventListener('click', function () {\n            \/\/ Get the cropped data\n            var croppedData = cropper.getData();\n\n            \/\/ Trigger download link\n            var downloadLink = document.createElement('a');\n            downloadLink.href = cropperImage.src;\n            downloadLink.download = 'cropped_image.jpg';\n            downloadLink.click();\n            downloadLink.remove();\n\n            \/\/ Close the modal\n            cropperModal.style.display = 'none';\n        });\n    });\n<\/script>\n\n\n\n<div id=\"image_cropper_modal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center;\">\n    <div style=\"background: white; padding: 20px; border-radius: 8px; text-align: center;\">\n        <label for=\"image_file\">Upload Image:<\/label>\n        <input type=\"file\" id=\"image_file\" accept=\"image\/*\" required style=\"margin-bottom: 10px;\">\n\n        <label for=\"aspect_ratio\">Aspect Ratio:<\/label>\n        <input type=\"text\" id=\"aspect_ratio\" value=\"1\" readonly style=\"margin-bottom: 10px;\">\n\n        <label for=\"width\">Width:<\/label>\n        <input type=\"text\" id=\"width\" value=\"300\" style=\"margin-bottom: 10px;\">\n\n        <label for=\"height\">Height:<\/label>\n        <input type=\"text\" id=\"height\" value=\"300\" style=\"margin-bottom: 10px;\">\n\n        <button type=\"button\" id=\"save_cropped_image\" style=\"background: #4CAF50; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer;\">Save Cropped Image<\/button>\n        \n        <img decoding=\"async\" src=\"\" id=\"cropper_image\" style=\"max-width: 100%; max-height: 80vh; margin-top: 10px;\">\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        var inputFile = document.getElementById('image_file');\n        var cropperImage = document.getElementById('cropper_image');\n        var cropperModal = document.getElementById('image_cropper_modal');\n        var cropper;\n\n        inputFile.addEventListener('change', function () {\n            var file = this.files[0];\n\n            \/\/ Check if a file is selected\n            if (file) {\n                var reader = new FileReader();\n\n                reader.onload = function (e) {\n                    \/\/ Show a simple cropping UI using Cropper.js\n                    cropperModal.style.display = 'flex';\n                    cropperImage.src = e.target.result;\n\n                    cropper = new Cropper(cropperImage, {\n                        aspectRatio: 1, \/\/ Set your desired aspect ratio\n                        crop: function (event) {\n                            \/\/ Handle crop event if needed\n                        }\n                    });\n                };\n\n                reader.readAsDataURL(file);\n            }\n        });\n\n        document.getElementById('save_cropped_image').addEventListener('click', function () {\n            \/\/ Get the cropped data\n            var croppedData = cropper.getData();\n\n            \/\/ Trigger download link\n            var downloadLink = document.createElement('a');\n            downloadLink.href = cropperImage.src;\n            downloadLink.download = 'cropped_image.jpg';\n            downloadLink.click();\n            downloadLink.remove();\n\n            \/\/ Close the modal\n            cropperModal.style.display = 'none';\n        });\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Upload Image: Aspect Ratio: Width: Height: Save Cropped Image Upload Image: Aspect Ratio: Width: Height: Save Cropped Image<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/posts\/25"}],"collection":[{"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zizya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":1,"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/zizya.com\/index.php?rest_route=\/wp\/v2\/posts\/25\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/zizya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zizya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zizya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}