Image Compressor Tool<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n }\n #output {\n margin-top: 20px;\n }\n<\/style>\n<\/head>\n<body>\n <h1>Image Compressor Tool<\/h1>\n <input type=\"file\" accept=\"image\/*\" id=\"fileInput\">\n <button onclick=\"compressImage()\">Compress Image<\/button>\n <div id=\"output\"><\/div>\n\n <script>\n function compressImage() {\n const fileInput = document.getElementById('fileInput');\n const output = document.getElementById('output');\n \n if (fileInput.files.length > 0) {\n const file = fileInput.files[0];\n const reader = new FileReader();\n \n reader.onload = function(event) {\n const img = new Image();\n img.src = event.target.result;\n\n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const maxWidth = 800; \/\/ Adjust maximum width as needed\n const maxHeight = 600; \/\/ Adjust maximum height as needed\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > maxWidth) {\n height *= maxWidth \/ width;\n width = maxWidth;\n }\n } else {\n if (height > maxHeight) {\n width *= maxHeight \/ height;\n height = maxHeight;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob(function(blob) {\n const url = URL.createObjectURL(blob);\n const compressedImage = new Image();\n compressedImage.src = url;\n\n output.innerHTML = '<h2>Compressed Image<\/h2>';\n output.appendChild(compressedImage);\n\n \/\/ Download link\n const a = document.createElement('a');\n a.href = url;\n a.download = 'compressed_image.jpg';\n a.textContent = 'Download Compressed Image';\n a.style.display = 'block';\n a.style.marginTop = '10px';\n output.appendChild(a);\n }, 'image\/jpeg', 0.7); \/\/ Adjust quality (0.7 = 70% quality)\n };\n };\n\n reader.readAsDataURL(file);\n } else {\n output.innerHTML = '<p>Please select an image to compress.<\/p>';\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">How to Use the Image Compressor Tool:<\/h3>\n\n\n\n<p><strong>Accessing the Tool:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open any web browser (Google Chrome, Firefox, etc.).<\/li>\n\n\n\n<li>Navigate to the location where you have saved the HTML file containing the Image Compressor Tool code.<\/li>\n\n\n\n<li>Double-click the file to open it in your web browser.<\/li>\n<\/ul>\n\n\n\n<p><strong>Uploading an Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the “Choose File” button.<\/li>\n\n\n\n<li>In the file dialog that opens, navigate to the image file you want to compress.<\/li>\n\n\n\n<li>Select the image file and click “Open” or equivalent depending on your operating system.<\/li>\n<\/ul>\n\n\n\n<p><strong>Compressing the Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once the image is selected, click the “Compress Image” button.<\/li>\n\n\n\n<li>The tool will start compressing the image according to predefined settings.<\/li>\n<\/ul>\n\n\n\n<p><strong>Viewing the Compressed Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After compression, the tool will display the compressed image below the input area.<\/li>\n\n\n\n<li>You will see the original image and the compressed image side by side.<\/li>\n<\/ul>\n\n\n\n<p><strong>Downloading the Compressed Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Below the compressed image, you’ll find a download link labeled “Download Compressed Image”.<\/li>\n\n\n\n<li>Click on this link to download the compressed image file to your device.<\/li>\n\n\n\n<li>The compressed image file will be saved with the name “compressed_image.jpg” by default.<\/li>\n<\/ul>\n\n\n\n<p><strong>Repeat as Needed:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can repeat the process as many times as necessary for different images.<\/li>\n\n\n\n<li>Simply click on “Choose File” again, select another image, and follow the steps to compress and download it.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tips:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose images with large file sizes or high resolutions to notice significant compression effects for optimal results.<\/li>\n\n\n\n<li>Adjustments to the maximum width, maximum height, and quality of the compressed image can be made directly within the HTML code as needed.<\/li>\n\n\n\n<li>Ensure that the web browser allows JavaScript execution for the tool to work correctly.<\/li>\n<\/ul>\n\n\n\n<p>Following these steps, you can efficiently compress images using the provided Image Compressor Tool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image Compressor Tool Image Compressor Tool Compress Image How to Use the Image Compressor Tool: Accessing the Tool: Uploading an Image: Compressing the Image: Viewing the Compressed Image: Downloading the Compressed Image: Repeat as Needed: Tips: Following these steps, you can efficiently compress images using the provided Image Compressor Tool.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":5,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":34,"date":"2024-03-25T10:12:30","date_gmt":"2024-03-25T10:12:30","guid":{"rendered":"https:\/\/calcuconvertonline.com\/?page_id=34"},"modified":"2024-04-04T10:58:06","modified_gmt":"2024-04-04T10:58:06","slug":"image-compressor-tool","status":"publish","type":"page","link":"https:\/\/calcuconvertonline.com\/index.php\/image-compressor-tool\/","title":{"rendered":"Image Compressor Tool"},"content":{"rendered":"\n\n\n\n\n\nImage Compressor Tool<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n }\n #output {\n margin-top: 20px;\n }\n<\/style>\n<\/head>\n<body>\n <h1>Image Compressor Tool<\/h1>\n <input type=\"file\" accept=\"image\/*\" id=\"fileInput\">\n <button onclick=\"compressImage()\">Compress Image<\/button>\n <div id=\"output\"><\/div>\n\n <script>\n function compressImage() {\n const fileInput = document.getElementById('fileInput');\n const output = document.getElementById('output');\n \n if (fileInput.files.length > 0) {\n const file = fileInput.files[0];\n const reader = new FileReader();\n \n reader.onload = function(event) {\n const img = new Image();\n img.src = event.target.result;\n\n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const maxWidth = 800; \/\/ Adjust maximum width as needed\n const maxHeight = 600; \/\/ Adjust maximum height as needed\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > maxWidth) {\n height *= maxWidth \/ width;\n width = maxWidth;\n }\n } else {\n if (height > maxHeight) {\n width *= maxHeight \/ height;\n height = maxHeight;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob(function(blob) {\n const url = URL.createObjectURL(blob);\n const compressedImage = new Image();\n compressedImage.src = url;\n\n output.innerHTML = '<h2>Compressed Image<\/h2>';\n output.appendChild(compressedImage);\n\n \/\/ Download link\n const a = document.createElement('a');\n a.href = url;\n a.download = 'compressed_image.jpg';\n a.textContent = 'Download Compressed Image';\n a.style.display = 'block';\n a.style.marginTop = '10px';\n output.appendChild(a);\n }, 'image\/jpeg', 0.7); \/\/ Adjust quality (0.7 = 70% quality)\n };\n };\n\n reader.readAsDataURL(file);\n } else {\n output.innerHTML = '<p>Please select an image to compress.<\/p>';\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">How to Use the Image Compressor Tool:<\/h3>\n\n\n\n<p><strong>Accessing the Tool:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open any web browser (Google Chrome, Firefox, etc.).<\/li>\n\n\n\n<li>Navigate to the location where you have saved the HTML file containing the Image Compressor Tool code.<\/li>\n\n\n\n<li>Double-click the file to open it in your web browser.<\/li>\n<\/ul>\n\n\n\n<p><strong>Uploading an Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the “Choose File” button.<\/li>\n\n\n\n<li>In the file dialog that opens, navigate to the image file you want to compress.<\/li>\n\n\n\n<li>Select the image file and click “Open” or equivalent depending on your operating system.<\/li>\n<\/ul>\n\n\n\n<p><strong>Compressing the Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once the image is selected, click the “Compress Image” button.<\/li>\n\n\n\n<li>The tool will start compressing the image according to predefined settings.<\/li>\n<\/ul>\n\n\n\n<p><strong>Viewing the Compressed Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After compression, the tool will display the compressed image below the input area.<\/li>\n\n\n\n<li>You will see the original image and the compressed image side by side.<\/li>\n<\/ul>\n\n\n\n<p><strong>Downloading the Compressed Image:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Below the compressed image, you’ll find a download link labeled “Download Compressed Image”.<\/li>\n\n\n\n<li>Click on this link to download the compressed image file to your device.<\/li>\n\n\n\n<li>The compressed image file will be saved with the name “compressed_image.jpg” by default.<\/li>\n<\/ul>\n\n\n\n<p><strong>Repeat as Needed:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can repeat the process as many times as necessary for different images.<\/li>\n\n\n\n<li>Simply click on “Choose File” again, select another image, and follow the steps to compress and download it.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tips:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose images with large file sizes or high resolutions to notice significant compression effects for optimal results.<\/li>\n\n\n\n<li>Adjustments to the maximum width, maximum height, and quality of the compressed image can be made directly within the HTML code as needed.<\/li>\n\n\n\n<li>Ensure that the web browser allows JavaScript execution for the tool to work correctly.<\/li>\n<\/ul>\n\n\n\n<p>Following these steps, you can efficiently compress images using the provided Image Compressor Tool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image Compressor Tool Image Compressor Tool Compress Image How to Use the Image Compressor Tool: Accessing the Tool: Uploading an Image: Compressing the Image: Viewing the Compressed Image: Downloading the Compressed Image: Repeat as Needed: Tips: Following these steps, you can efficiently compress images using the provided Image Compressor Tool.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":5,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}