{"id":1533,"date":"2023-03-20T21:52:55","date_gmt":"2023-03-20T21:52:55","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1533"},"modified":"2025-12-06T06:00:09","modified_gmt":"2025-12-06T06:00:09","slug":"thay-doi-kich-thuoc-va-nen-anh-png-truc-tuyen","status":"publish","type":"page","link":"https:\/\/universomotero.com\/vi\/thay-doi-kich-thuoc-va-nen-anh-png-truc-tuyen\/","title":{"rendered":"C\u00f4ng c\u1ee5 tr\u1ef1c tuy\u1ebfn thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 n\u00e9n \u1ea3nh PNG"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">C\u00f4ng c\u1ee5 tr\u1ef1c tuy\u1ebfn thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 n\u00e9n \u1ea3nh PNG<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">N\u00e9n b\u1ea5t k\u1ef3 \u1ea3nh PNG n\u00e0o tr\u1ef1c tuy\u1ebfn mi\u1ec5n ph\u00ed. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc \u1ea3nh tr\u1ef1c tuy\u1ebfn ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<tool-body>\n<div id=\"tool-body\" style=\"text-align: center;\" class=\"wrapper\">\n<div class=\"upload-box\">\n   <input type=\"file\" accept=\"image\/*\" hidden=\"\">\n   <img decoding=\"async\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/upload-icon.webp\" alt=\"bi\u1ec3u t\u01b0\u1ee3ng t\u1ea3i l\u00ean\">\n   <p>Ch\u1ecdn t\u1eadp tin \u0111\u1ec3 t\u1ea3i l\u00ean<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Chi\u1ec1u r\u1ed9ng<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Chi\u1ec1u cao<\/label>\n   <input type=\"number\">\n   <\/div>\n   <\/div>\n   <div class=\"row checkboxes\">\n   <div class=\"column ratio\">\n   <input type=\"checkbox\" id=\"ratio\" checked=\"\">\n   <label for=\"ratio\">Kh\u00f3a t\u1ef7 l\u1ec7 khung h\u00ecnh<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">Gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">T\u1ea3i xu\u1ed1ng h\u00ecnh \u1ea3nh<\/button>\n   <\/div>\n   <\/div>\n<\/tool-body>\n\n\n\n<style>\ntool-body{\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmin-height: 50%;\n}\n\n.wrapper{\n\/* width: 50%; *\/\nheight: 288px;\npadding: 30px;\nbackground: #fff;\nborder-radius: 9px;\ntransition: height 0.2s ease;\n}\n\n.wrapper.active{\nheight: 537px;\n}\n\n.wrapper .upload-box{\nheight: 225px;\ndisplay: flex;\ncursor: pointer;\nalign-items: center;\njustify-content: center;\nflex-direction: column;\nborder-radius: 5px;\nborder: 2px dashed #afafaf;\n}\n\n.wrapper.active .upload-box{\nborder: none;\n}\n\n.upload-box p{\nfont-size: 1.06rem;\nmargin-top: 20px;\n}\n\n.wrapper.active .upload-box p{\ndisplay: none;\n}\n\n.wrapper.active .upload-box img{\nwidth: 100%;\nheight: 100%;\nobject-fit: cover;\nborder-radius: 5px;\n}\n\n.wrapper .content{\nopacity: 0;\nmargin-top: 28px;\npointer-events: none;\n}\n\n.wrapper.active .content{\nopacity: 1;\npointer-events: auto;\ntransition: opacity 0.5s 0.05s ease;\n}\n\n.content .row{\ndisplay: flex;\njustify-content: space-between;\n}\n\n.content .row .column{\nwidth: calc(100% \/ 2 - 15px);\n}\n\n.row .column label{\nfont-size: 1.06rem;\n}\n\n.sizes .column input{\nwidth: 100%;\nheight: 49px;\noutline: none;\nmargin-top: 7px;\npadding: 0 15px;\nfont-size: 1.06rem;\nborder-radius: 4px;\nborder: 1px solid #aaa;\n}\n\n.sizes .column input:focus{\npadding: 0 14px;\nborder: 2px solid #927DFC;\n}\n\n.content .checkboxes{\nmargin-top: 20px;\n}\n\n.checkboxes .column{\ndisplay: flex;\nalign-items: center;\n}\n\n.checkboxes .column input{\nwidth: 17px;\nheight: 17px;\nmargin-right: 9px;\naccent-color: #927DFC;\n}\n\n.content .download-btn{\nwidth: 100%;\ncolor: #fff;\noutline: none;\nborder: none;\ncursor: pointer;\nfont-size: 1.06rem;\nborder-radius: 5px;\npadding: 15px 0;\nmargin: 30px 0 10px;\nbackground: #927DFC;\ntext-transform: uppercase;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nconst uploadBox = document.querySelector(\".upload-box\"),\npreviewImg = uploadBox.querySelector(\"img\"),\nfileInput = uploadBox.querySelector(\"input\"),\nwidthInput = document.querySelector(\".width input\"),\nheightInput = document.querySelector(\".height input\"),\nratioInput = document.querySelector(\".ratio input\"),\nqualityInput = document.querySelector(\".quality input\"),\ndownloadBtn = document.querySelector(\".download-btn\");\nlet ogImageRatio;\n\nconst loadFile = (e) => {\nconst file = e.target.files[0]; \/\/ getting first user selected file\nif(!file) return; \/\/ return if user hasn't selected any file\npreviewImg.src = URL.createObjectURL(file); \/\/ passing selected file url to preview img src\npreviewImg.addEventListener(\"load\", () => { \/\/ once img loaded\nwidthInput.value = previewImg.naturalWidth;\nheightInput.value = previewImg.naturalHeight;\nogImageRatio = previewImg.naturalWidth \/ previewImg.naturalHeight;\ndocument.querySelector(\".wrapper\").classList.add(\"active\");\n});\n}\n\nwidthInput.addEventListener(\"keyup\", () => {\n\/\/ getting height according to the ratio checkbox status\nconst height = ratioInput.checked ? widthInput.value \/ ogImageRatio : heightInput.value;\nheightInput.value = Math.floor(height);\n});\n\nheightInput.addEventListener(\"keyup\", () => {\n\/\/ getting width according to the ratio checkbox status\nconst width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;\nwidthInput.value = Math.floor(width);\n});\n\nconst resizeAndDownload = () => {\nconst canvas = document.createElement(\"canvas\");\nconst a = document.createElement(\"a\");\nconst ctx = canvas.getContext(\"2d\");\n\n\/\/ if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0\n\/\/ 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0\nconst imgQuality = qualityInput.checked ? 0.5 : 1.0;\n\n\/\/ setting canvas height & width according to the input values\ncanvas.width = widthInput.value;\ncanvas.height = heightInput.value;\n\n\/\/ drawing user selected image onto the canvas\nctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);\n\n\/\/ passing canvas data url as href value of <a> element\na.href = canvas.toDataURL(\"image\/png\", imgQuality);\na.download = new Date().getTime(); \/\/ passing current time as download value\na.click(); \/\/ clicking <a> element so the file download\n}\n\ndownloadBtn.addEventListener(\"click\", resizeAndDownload);\nfileInput.addEventListener(\"change\", loadFile);\nuploadBox.addEventListener(\"click\", () => fileInput.click());\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">N\u00f3 ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00f4ng c\u1ee5 tr\u1ef1c tuy\u1ebfn n\u00e0y s\u1ebd n\u00e9n \u1ea3nh PNG b\u1eb1ng thu\u1eadt to\u00e1n th\u01b0\u1eddng \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u. K\u1ef9 thu\u1eadt n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u s\u1ebd gi\u1ea3m k\u00edch th\u01b0\u1edbc \u1ea3nh PNG b\u1eb1ng c\u00e1ch b\u1ea3o to\u00e0n t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u h\u00ecnh \u1ea3nh m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng. N\u00f3 s\u1ebd thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc t\u1ec7p \u1ea3nh PNG b\u1eb1ng c\u00e1ch t\u1ed1i \u01b0u h\u00f3a b\u1ea3ng m\u00e0u. N\u00f3 lo\u1ea1i b\u1ecf th\u00f4ng tin kh\u00f4ng c\u1ea7n thi\u1ebft v\u00e0 thay \u0111\u1ed5i s\u1ed1 l\u01b0\u1ee3ng pixel trong khi v\u1eabn duy tr\u00ec t\u1ef7 l\u1ec7 khung h\u00ecnh.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 n\u00e9n \u1ea3nh PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 N\u00e9n \u1ea3nh PNG tr\u1ef1c tuy\u1ebfn c\u1ee7a ch\u00fang t\u00f4i \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 n\u00e9n t\u1ec7p PNG l\u1edbn th\u00e0nh t\u1ec7p nh\u1ecf h\u01a1n ho\u1eb7c th\u1eadm ch\u00ed l\u00e0 k\u00edch th\u01b0\u1edbc mong mu\u1ed1n c\u1ee7a b\u1ea1n. B\u1ea1n kh\u00f4ng c\u1ea7n t\u1ea3i xu\u1ed1ng, c\u00e0i \u0111\u1eb7t ho\u1eb7c \u0111\u0103ng k\u00fd b\u1ea5t k\u1ef3 d\u1ecbch v\u1ee5 n\u00e0o. V\u1eady l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u1ef1c hi\u1ec7n? D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ba b\u01b0\u1edbc \u0111\u01a1n gi\u1ea3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u1ea3i \u1ea3nh c\u1ee7a b\u1ea1n l\u00ean:<\/strong>&nbsp;Ch\u1ecdn \u1ea3nh PNG b\u1ea1n mu\u1ed1n n\u00e9n ho\u1eb7c thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc. K\u00e9o th\u1ea3 \u1ea3nh v\u00e0o c\u00f4ng c\u1ee5.<\/li>\n\n\n\n<li><strong>T\u00f9y ch\u1ec9nh c\u00e0i \u0111\u1eb7t:<\/strong>&nbsp;Sau khi t\u1ea3i \u1ea3nh l\u00ean, b\u1ea1n s\u1ebd th\u1ea5y c\u00e1c t\u00f9y ch\u1ecdn v\u1ec1 chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a \u1ea3nh. H\u00e3y ch\u1ecdn chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a \u1ea3nh theo \u00fd mu\u1ed1n ho\u1eb7c nhu c\u1ea7u c\u1ee7a b\u1ea1n. Ngo\u00e0i ra, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 ch\u1ecdn t\u00f9y ch\u1ecdn Gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 Kh\u00f3a t\u1ef7 l\u1ec7 khung h\u00ecnh. B\u1eb1ng c\u00e1ch ch\u1ecdn \u201cGi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng\u201d, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i m\u1ed9t t\u1ec7p \u1ea3nh l\u1edbn th\u00e0nh m\u1ed9t t\u1ec7p c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n. \u201cKh\u00f3a t\u1ef7 l\u1ec7 khung h\u00ecnh\u201d s\u1ebd \u0111\u1ea3m b\u1ea3o t\u1ef7 l\u1ec7 khung h\u00ecnh c\u1ee7a \u1ea3nh v\u1eabn gi\u1eef nguy\u00ean nh\u01b0 tr\u01b0\u1edbc khi thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc.<\/li>\n\n\n\n<li><strong>L\u01b0u \u1ea3nh c\u1ee7a b\u1ea1n:<\/strong>&nbsp;Xem tr\u01b0\u1edbc h\u00ecnh \u1ea3nh \u0111\u00e3 t\u00f9y ch\u1ec9nh \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o n\u00f3 tr\u00f4ng \u0111\u00fang nh\u01b0 \u00fd mu\u1ed1n c\u1ee7a b\u1ea1n r\u1ed3i nh\u1ea5n T\u1ea3i xu\u1ed1ng h\u00ecnh \u1ea3nh.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">T\u1ea1i sao t\u00f4i n\u00ean n\u00e9n c\u00e1c t\u1eadp tin PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">T\u1ec7p PNG lu\u00f4n l\u1edbn h\u01a1n t\u1ec7p JPEG v\u00ec t\u1ec7p PNG ch\u1ee9a nhi\u1ec1u d\u1eef li\u1ec7u h\u01a1n t\u1ec7p JPEG. T\u1ec7p PNG ch\u1ee9a nhi\u1ec1u chi ti\u1ebft v\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao h\u01a1n. B\u1eb1ng c\u00e1ch n\u00e9n t\u1ec7p PNG, b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m \u0111\u00e1ng k\u1ec3 k\u00edch th\u01b0\u1edbc t\u1ec7p v\u00e0 gi\u00fap ch\u00fang d\u1ec5 s\u1eed d\u1ee5ng, chia s\u1ebb ho\u1eb7c t\u1ea3i l\u00ean h\u01a1n. Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng l\u01b0u tr\u1eef tr\u00ean thi\u1ebft b\u1ecb ho\u1eb7c m\u00e1y ch\u1ee7 c\u1ee7a m\u00ecnh. \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap b\u1ea1n c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t trang web b\u1eb1ng c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 trang web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">N\u00e9n file PNG c\u00f3 an to\u00e0n kh\u00f4ng?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e2ng, vi\u1ec7c n\u00e9n file PNG l\u00e0 an to\u00e0n. C\u00f4ng c\u1ee5 n\u00e9n PNG s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u, ngh\u0129a l\u00e0 n\u00f3 s\u1ebd thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 n\u00e9n file \u1ea3nh PNG c\u1ee7a b\u1ea1n m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng ho\u1eb7c m\u1ea5t b\u1ea5t k\u1ef3 d\u1eef li\u1ec7u n\u00e0o. \u0110\u00f3 l\u00e0 l\u00fd do t\u1ea1i sao n\u00e9n PNG \u0111\u01b0\u1ee3c coi l\u00e0 an to\u00e0n h\u01a1n n\u00e9n JPEG.<\/p>","protected":false},"excerpt":{"rendered":"<p>Online PNG Image Resize And Compress Compress any PNG image online for free. You also can resize images online instantly Browse File to Upload Width Height Lock aspect ratio Reduce quality Download Image How Does It Work? This online tool will compress a PNG image by using an algorithm that is generally called lossless compression. [&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-1533","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1533","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=1533"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/pages\/1533\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/vi\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"trang web","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}