{"id":1642,"date":"2024-12-14T16:22:51","date_gmt":"2024-12-14T16:22:51","guid":{"rendered":"https:\/\/donhit.com\/en\/?p=1642"},"modified":"2025-02-07T08:03:31","modified_gmt":"2025-02-07T08:03:31","slug":"image-resize","status":"publish","type":"post","link":"https:\/\/donhit.com\/en\/tools\/image-resize\/","title":{"rendered":"Image Resize"},"content":{"rendered":"<p><center>    <div class=\"bg-white shadow-2xl rounded-xl p-6 w-full max-w-4xl\">\r\n        <h2 class=\"text-3xl font-bold text-center mb-6 text-gray-800\">\r\n            <i class=\"fas fa-image mr-2\"><\/i>Professional Image Resize Studio\r\n        <\/h2>\r\n        \r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n            <!-- Image Upload Section -->\r\n            <div class=\"bg-gray-50 p-4 rounded-lg border-2 border-dashed border-gray-300\">\r\n                <input \r\n                    type=\"file\" \r\n                    id=\"imageUpload\" \r\n                    accept=\"image\/*\" \r\n                    class=\"hidden\" \r\n                \/>\r\n                <label \r\n                    for=\"imageUpload\" \r\n                    class=\"flex flex-col items-center justify-center cursor-pointer p-6 hover:bg-gray-100 transition\"\r\n                >\r\n                    <i class=\"fas fa-cloud-upload-alt text-5xl text-blue-500 mb-4\"><\/i>\r\n                    <p class=\"text-gray-600 text-center\">\r\n                        Drag & Drop or Click to Upload Image\r\n                    <\/p>\r\n                <\/label>\r\n            <\/div>\r\n            \r\n            <!-- Resize Controls -->\r\n            <div class=\"space-y-4\">\r\n                <div>\r\n                    <label class=\"block text-sm font-medium text-gray-700\">Resize Method<\/label>\r\n                    <select \r\n                        id=\"resizeMethod\" \r\n                        class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200\"\r\n                    >\r\n                        <option value=\"scale\">Scale<\/option>\r\n                        <option value=\"crop\">Crop<\/option>\r\n                        <option value=\"fit\">Fit to Dimensions<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                \r\n                <div class=\"grid grid-cols-2 gap-4\">\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700\">Width (px)<\/label>\r\n                        <input \r\n                            type=\"number\" \r\n                            id=\"widthInput\" \r\n                            class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200\"\r\n                            value=\"800\" \r\n                        \/>\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700\">Height (px)<\/label>\r\n                        <input \r\n                            type=\"number\" \r\n                            id=\"heightInput\" \r\n                            class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200\"\r\n                            value=\"600\" \r\n                        \/>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div>\r\n                    <label class=\"block text-sm font-medium text-gray-700\">Quality<\/label>\r\n                    <input \r\n                        type=\"range\" \r\n                        id=\"qualitySlider\" \r\n                        min=\"0.1\" \r\n                        max=\"1\" \r\n                        step=\"0.1\" \r\n                        value=\"0.9\" \r\n                        class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\"\r\n                    \/>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Preview and Download -->\r\n        <div class=\"mt-6 flex flex-col items-center\">\r\n            <canvas \r\n                id=\"previewCanvas\" \r\n                class=\"max-w-full border-2 border-gray-300 rounded-lg mb-4\"\r\n            ><\/canvas>\r\n            \r\n            <div class=\"flex space-x-4\">\r\n                <button \r\n                    id=\"resizeButton\" \r\n                    class=\"bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 transition flex items-center\"\r\n                >\r\n                    <i class=\"fas fa-compress-arrows-alt mr-2\"><\/i>Resize Image\r\n                <\/button>\r\n                <button \r\n                    id=\"downloadButton\" \r\n                    class=\"bg-green-500 text-white px-6 py-2 rounded-md hover:bg-green-600 transition flex items-center\"\r\n                    disabled\r\n                >\r\n                    <i class=\"fas fa-download mr-2\"><\/i>Download\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const imageUpload = document.getElementById('imageUpload');\r\n            const previewCanvas = document.getElementById('previewCanvas');\r\n            const widthInput = document.getElementById('widthInput');\r\n            const heightInput = document.getElementById('heightInput');\r\n            const qualitySlider = document.getElementById('qualitySlider');\r\n            const resizeMethod = document.getElementById('resizeMethod');\r\n            const resizeButton = document.getElementById('resizeButton');\r\n            const downloadButton = document.getElementById('downloadButton');\r\n\r\n            let originalImage = null;\r\n            let resizedImage = null;\r\n\r\n            imageUpload.addEventListener('change', (e) => {\r\n                const file = e.target.files[0];\r\n                if (file) {\r\n                    const reader = new FileReader();\r\n                    reader.onload = (event) => {\r\n                        originalImage = new Image();\r\n                        originalImage.onload = () => {\r\n                            previewCanvas.width = originalImage.width;\r\n                            previewCanvas.height = originalImage.height;\r\n                            const ctx = previewCanvas.getContext('2d');\r\n                            ctx.drawImage(originalImage, 0, 0);\r\n                            \r\n                            \/\/ Auto-populate initial dimensions\r\n                            widthInput.value = originalImage.width;\r\n                            heightInput.value = originalImage.height;\r\n                        };\r\n                        originalImage.src = event.target.result;\r\n                    };\r\n                    reader.readAsDataURL(file);\r\n                }\r\n            });\r\n\r\n            resizeButton.addEventListener('click', () => {\r\n                if (!originalImage) return;\r\n\r\n                const canvas = document.createElement('canvas');\r\n                const ctx = canvas.getContext('2d');\r\n                const width = parseInt(widthInput.value);\r\n                const height = parseInt(heightInput.value);\r\n                const quality = parseFloat(qualitySlider.value);\r\n\r\n                canvas.width = width;\r\n                canvas.height = height;\r\n\r\n                switch (resizeMethod.value) {\r\n                    case 'scale':\r\n                        const scale = Math.min(width \/ originalImage.width, height \/ originalImage.height);\r\n                        const scaledWidth = originalImage.width * scale;\r\n                        const scaledHeight = originalImage.height * scale;\r\n                        const dx = (width - scaledWidth) \/ 2;\r\n                        const dy = (height - scaledHeight) \/ 2;\r\n                        \r\n                        ctx.fillStyle = 'white';\r\n                        ctx.fillRect(0, 0, width, height);\r\n                        ctx.drawImage(originalImage, dx, dy, scaledWidth, scaledHeight);\r\n                        break;\r\n\r\n                    case 'crop':\r\n                        const cropScale = Math.max(width \/ originalImage.width, height \/ originalImage.height);\r\n                        const cropWidth = originalImage.width * cropScale;\r\n                        const cropHeight = originalImage.height * cropScale;\r\n                        const sx = (cropWidth - width) \/ 2;\r\n                        const sy = (cropHeight - height) \/ 2;\r\n                        \r\n                        ctx.drawImage(\r\n                            originalImage, \r\n                            sx, sy, width, height,\r\n                            0, 0, width, height\r\n                        );\r\n                        break;\r\n\r\n                    case 'fit':\r\n                        const fitScale = Math.min(width \/ originalImage.width, height \/ originalImage.height);\r\n                        const fitWidth = originalImage.width * fitScale;\r\n                        const fitHeight = originalImage.height * fitScale;\r\n                        const fitDx = (width - fitWidth) \/ 2;\r\n                        const fitDy = (height - fitHeight) \/ 2;\r\n                        \r\n                        ctx.fillStyle = 'white';\r\n                        ctx.fillRect(0, 0, width, height);\r\n                        ctx.drawImage(originalImage, fitDx, fitDy, fitWidth, fitHeight);\r\n                        break;\r\n                }\r\n\r\n                resizedImage = canvas;\r\n                previewCanvas.width = width;\r\n                previewCanvas.height = height;\r\n                previewCanvas.getContext('2d').drawImage(canvas, 0, 0);\r\n                \r\n                downloadButton.disabled = false;\r\n            });\r\n\r\n            downloadButton.addEventListener('click', () => {\r\n                if (!resizedImage) return;\r\n\r\n                const link = document.createElement('a');\r\n                link.download = 'resized_image.png';\r\n                link.href = resizedImage.toDataURL('image\/png', qualitySlider.value);\r\n                link.click();\r\n            });\r\n\r\n            \/\/ Drag and drop support\r\n            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\r\n                document.body.addEventListener(eventName, preventDefaults, false);\r\n            });\r\n\r\n            function preventDefaults(e) {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n            }\r\n\r\n            ['dragenter', 'dragover'].forEach(eventName => {\r\n                document.body.addEventListener(eventName, highlight, false);\r\n            });\r\n\r\n            ['dragleave', 'drop'].forEach(eventName => {\r\n                document.body.addEventListener(eventName, unhighlight, false);\r\n            });\r\n\r\n            function highlight() {\r\n                document.querySelector('label[for=\"imageUpload\"]').classList.add('bg-blue-100');\r\n            }\r\n\r\n            function unhighlight() {\r\n                document.querySelector('label[for=\"imageUpload\"]').classList.remove('bg-blue-100');\r\n            }\r\n\r\n            document.body.addEventListener('drop', handleDrop, false);\r\n\r\n            function handleDrop(e) {\r\n                const dt = e.dataTransfer;\r\n                const files = dt.files;\r\n                imageUpload.files = files;\r\n                imageUpload.dispatchEvent(new Event('change'));\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[187],"tags":[],"class_list":["post-1642","post","type-post","status-publish","format-standard","hentry","category-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Image Resize - DonHit<\/title>\n<meta name=\"description\" content=\"Image resizing plays a crucial role in enhancing web performance, optimizing design, and ensuring consistency across social media platforms.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donhit.com\/en\/tools\/image-resize\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Resize - DonHit\" \/>\n<meta property=\"og:description\" content=\"Image resizing plays a crucial role in enhancing web performance, optimizing design, and ensuring consistency across social media platforms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donhit.com\/en\/tools\/image-resize\/\" \/>\n<meta property=\"og:site_name\" content=\"DonHit - World of Tools\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-14T16:22:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T08:03:31+00:00\" \/>\n<meta name=\"author\" content=\"DonHit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DonHit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Resize - DonHit","description":"Image resizing plays a crucial role in enhancing web performance, optimizing design, and ensuring consistency across social media platforms.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/donhit.com\/en\/tools\/image-resize\/","og_locale":"en_US","og_type":"article","og_title":"Image Resize - DonHit","og_description":"Image resizing plays a crucial role in enhancing web performance, optimizing design, and ensuring consistency across social media platforms.","og_url":"https:\/\/donhit.com\/en\/tools\/image-resize\/","og_site_name":"DonHit - World of Tools","article_published_time":"2024-12-14T16:22:51+00:00","article_modified_time":"2025-02-07T08:03:31+00:00","author":"DonHit","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DonHit","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/#article","isPartOf":{"@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/"},"author":{"name":"DonHit","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"headline":"Image Resize","datePublished":"2024-12-14T16:22:51+00:00","dateModified":"2025-02-07T08:03:31+00:00","mainEntityOfPage":{"@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"articleSection":["Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donhit.com\/en\/tools\/image-resize\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/","url":"https:\/\/donhit.com\/en\/tools\/image-resize\/","name":"Image Resize - DonHit","isPartOf":{"@id":"https:\/\/donhit.com\/en\/#website"},"datePublished":"2024-12-14T16:22:51+00:00","dateModified":"2025-02-07T08:03:31+00:00","description":"Image resizing plays a crucial role in enhancing web performance, optimizing design, and ensuring consistency across social media platforms.","breadcrumb":{"@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donhit.com\/en\/tools\/image-resize\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/donhit.com\/en\/tools\/image-resize\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/donhit.com\/en\/"},{"@type":"ListItem","position":2,"name":"Tools","item":"https:\/\/donhit.com\/en\/category\/tools\/"},{"@type":"ListItem","position":3,"name":"Image Resize"}]},{"@type":"WebSite","@id":"https:\/\/donhit.com\/en\/#website","url":"https:\/\/donhit.com\/en\/","name":"DonHit - World of tools","description":"","publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donhit.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148","name":"DonHit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","contentUrl":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","width":400,"height":267,"caption":"DonHit"},"logo":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/"},"description":"DonHit is a website designed to provide useful tools for everyone. Its primary goal is to support and empower the community. All the tools available on the site are completely free to use.","sameAs":["https:\/\/donhit.com\/en"],"url":"https:\/\/donhit.com\/en\/author\/admin_don\/"}]}},"_links":{"self":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/comments?post=1642"}],"version-history":[{"count":2,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1642\/revisions"}],"predecessor-version":[{"id":2060,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1642\/revisions\/2060"}],"wp:attachment":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/media?parent=1642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/categories?post=1642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/tags?post=1642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}