{"id":1529,"date":"2023-03-20T21:45:21","date_gmt":"2023-03-20T21:45:21","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1529"},"modified":"2025-12-06T06:00:06","modified_gmt":"2025-12-06T06:00:06","slug":"online-image-resize","status":"publish","type":"page","link":"https:\/\/universomotero.com\/vi\/online-image-resize\/","title":{"rendered":"Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh tr\u1ef1c tuy\u1ebfn"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh tr\u1ef1c tuy\u1ebfn<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong>Our online image resize tool helps to resize images and also convert them to other formats<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"text-align: center;\" class=\"layout\">\n<div class=\"container\">\n<div class=\"image-container\">\n<div class=\"image-preview\">\n<img decoding=\"async\" id=\"myImage\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/back.png\" alt=\"Resized image\">\n   <p id=\"originalInfo\"><\/p>\n   <\/div>\n   <div class=\"file\">\n   <input style=\"display:none;\" class=\"upload-btn\" data-text=\"Select your file!\" type=\"file\" id=\"uploadImage\" accept=\"image\/*\" onchange=\"showOriginalInfo()\">\n   <label class=\"upload-image-button upload-btn\" for=\"uploadImage\">Choose files<\/label>\n   <\/div>\n\n   <div class=\"width-box\">\n   <label for=\"width\">Width:<\/label>\n   <input type=\"number\" id=\"width\" name=\"width\">\n   <\/div>\n   <div class=\"height-box\">\n   <label for=\"height\">Height:<\/label>\n   <input type=\"number\" id=\"height\" name=\"height\">\n   <\/div>\n   <label for=\"format\">Format:<\/label>\n   <div>\n   <select id=\"format\" name=\"format\">\n   <option value=\"jpg\">JPG<\/option>\n   <option value=\"png\">PNG<\/option>\n   <option value=\"webp\">WebP<\/option>\n   <\/select>\n   <\/div>\n\n   <br>\n   <div class=\"width-box\">\n   <button id=\"resizeBtn\" onclick=\"resizeImage()\">Resize Image<\/button>\n   <a id=\"downloadBtn\" download=\"online-image-resize.jpg\" href=\"\"><button class=\"download-button\">Download<\/button><\/a>\n   <p id=\"resizedInfo\"><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<style>\nbody {\nfont-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\nhtml,\nbody,\n.container {\nheight: 100%;\nwidth: 100%;\n}\n\n.container {\ndisplay: flex;\nflex-wrap: wrap;\njustify-content: center;\n}\n\n.width-box, .height-box{\npadding:5px;\n}\n\n.image-container {\nwidth: 100%;\nmax-width: 600px;\n\/*margin: 20px;*\/\npadding: 20px;\nborder: 1px solid #ccc;\nborder-radius: 10px;\nbox-shadow: 0px 0px 10px #ccc;\n}\n\n.image-preview {\nwidth: 100%;\nmax-width: 600px;\n}\n\nimg {\ndisplay: unset!important;\nmax-width: 100%;\nheight: auto;\nmax-width: 90%!important;\nmax-height: 220px!important;\n}\n\ninput[type=\"file\"] {\nmargin-bottom: 10px;\n}\n\nbutton {\nbackground-color: #4CAF50;\nborder: none;\ncolor: white;\npadding: 10px 20px;\ntext-align: center;\ntext-decoration: none;\ndisplay: inline-block;\nfont-size: 16px;\nmargin-bottom: 10px;\nborder-radius: 5px;\ncursor: pointer;\n}\n\n.download-button{\nbackground-color:#1289dd;\n}\n\n[type=\"file\"] + label {\nbackground: hsl(214deg 62% 46%);\nborder: none;\nborder-radius: 5px;\ncolor: #fff;\ncursor: pointer;\ndisplay: inline-block;\nfont-family: 'Rubik', sans-serif;\nfont-size: inherit;\nfont-weight: 500;\nmargin-bottom: 1rem;\noutline: none;\nposition: relative;\ntransition: all 0.3s;\nvertical-align: middle;\n}\n\n.upload-btn:hover {\nbox-shadow: 0 4px darken(#f8eae3, 10%);\ntop: 2px;\nbackground: #545b62!important;\n}\n\n.upload-image-button {\ncolor: #878787;\n}\n\n.upload-image-button {\ncolor: #fff;\ncursor: pointer;\noutline: none;\npadding: 10px 25px;\ntext-transform: uppercase;\ntransition: all 1s ease;\nmargin: 10px 0px 10px 0px;\n}\n\n.row {\ndisplay: flex;\njustify-content: space-between;\n}\n\n#originalInfo {\nfont-size:16px;\ncolor: #ec0000;\n}\n\n#resizedInfo {\nfont-size:16px;\ncolor: #008000;\n}\n\n@media screen and (max-width: 768px) {\n.container {\nflex-direction: column\n}\n<\/style>\n\n\n\n<script>\nconst img = document.getElementById(\"myImage\");\nconst upload = document.getElementById(\"uploadImage\");\nconst widthInput = document.getElementById(\"width\");\nconst heightInput = document.getElementById(\"height\");\nconst formatSelect = document.getElementById(\"format\");\nconst downloadBtn = document.getElementById(\"downloadBtn\");\nconst originalInfo = document.getElementById(\"originalInfo\");\nconst resizedInfo = document.getElementById(\"resizedInfo\");\n\nfunction showOriginalInfo() {\nconst file = upload.files[0];\nconst fileSize = Math.round(file.size \/ 1024);\nconst fileType = file.type.split(\"\/\")[1].toUpperCase();\nconst img = new Image();\nimg.src = URL.createObjectURL(file);\nimg.onload = function() {\nconst width = this.width;\nconst height = this.height;\noriginalInfo.innerHTML = `Original size: ${width} x ${height} - ${fileSize} KB (${fileType})`;\n};\n}\n\nfunction resizeImage() {\nconst currentWidth = img.clientWidth;\nconst currentHeight = img.clientHeight;\nconst desiredWidth = widthInput.value || currentWidth;\nconst desiredHeight = heightInput.value || currentHeight;\nconst format = formatSelect.value;\n\nimg.style.width = desiredWidth + \"px\";\nimg.style.height = desiredHeight + \"px\";\n\nconst canvas = document.createElement(\"canvas\");\ncanvas.width = desiredWidth;\ncanvas.height = desiredHeight;\n\nconst ctx = canvas.getContext(\"2d\");\nctx.drawImage(img, 0, 0, desiredWidth, desiredHeight);\n\nconst dataUrl = canvas.toDataURL(\"image\/\" + format);\ndownloadBtn.href = dataUrl;\ndownloadBtn.download = \"online-image-resize.\" + format;\n\ncanvas.toBlob((blob) => {\nconst url = URL.createObjectURL(blob);\nimg.src = url;\ndownloadBtn.href = url;\ndownloadBtn.download = `online-image-resize.${format}`;\nconst resizedFileSize = Math.round(blob.size \/ 1024);\nconst resizedFileType = blob.type;\nresizedInfo.innerHTML = `Resized size: ${desiredWidth} x ${desiredHeight} - ${resizedFileSize} KB`;\n}, `image\/${format}`, 1);\n}\n\nupload.addEventListener(\"change\", function() {\nconst file = upload.files[0];\nconst reader = new FileReader();\n\nreader.addEventListener(\"load\", function() {\nimg.src = reader.result;\n}, false);\n\nif (file) {\nreader.readAsDataURL(file);\n}\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Image Resizing?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Image resizing is the process of changing an image&#8217;s size, dimensions, or resolution, typically done to fit it into different output mediums or reduce file size. It is essential to be careful when resizing images as it can affect their quality and clarity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is An Image Resizer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An online tool for resizing images is called image resizer. Any image, including JPG, PNG, and WebP files, can be resized with this application. It operates instantly in any JavaScript-enabled browser and is entirely web-based.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Resize An Image Online?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Resizing images online is a very simple task using our tool. Here are the steps to resize an image:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the tool and choose an image from your phone or computer.<\/li>\n\n\n\n<li>Enter the height and width of the new image you want.<\/li>\n\n\n\n<li>Select the image format you need for the new image.<\/li>\n\n\n\n<li>Click on resize button and preview the newly resized image.<\/li>\n\n\n\n<li>Click the download button and save it on your device.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">From the above, the newly resized image will be saved on your device. Now you can use it anywhere.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Many Image Formats It Supports?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Currently, we supports the three most popular image formats JPEG, PNG and WebP which are widely used.<\/p>","protected":false},"excerpt":{"rendered":"<p>Online Image Resize Our online image resize tool helps to resize images and also convert them to other formats Choose files Width: Height: Format: JPGPNGWebP Resize Image Download What Is Image Resizing? Image resizing is the process of changing an image&#8217;s size, dimensions, or resolution, typically done to fit it into different output mediums or [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1529","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1529\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1529\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/media?parent=1529"}],"curies":[{"name":"trang web","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}