{"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":"baguhin-ang-laki-ng-larawan-online","status":"publish","type":"page","link":"https:\/\/universomotero.com\/tl\/baguhin-ang-laki-ng-larawan-online\/","title":{"rendered":"Baguhin ang laki ng Online na Larawan"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Baguhin ang laki ng Online na Larawan<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong>Ang aming online na tool sa pagpapalit ng laki ng imahe ay nakakatulong sa pagpapalit ng laki ng mga imahe at pag-convert ng mga ito sa iba pang mga format.<\/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=\"Binago ang laki ng imahe\">\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\">Pumili ng mga file<\/label>\n   <\/div>\n\n   <div class=\"width-box\">\n   <label for=\"width\">Lapad:<\/label>\n   <input type=\"number\" id=\"width\" name=\"width\">\n   <\/div>\n   <div class=\"height-box\">\n   <label for=\"height\">Taas:<\/label>\n   <input type=\"number\" id=\"height\" name=\"height\">\n   <\/div>\n   <label for=\"format\">Pormat:<\/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()\">Baguhin ang laki ng Imahe<\/button>\n   <a id=\"downloadBtn\" download=\"online-image-resize.jpg\" href=\"\"><button class=\"download-button\">I-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\">Ano ang pagpapalit ng laki ng imahe?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ang pagbabago ng laki ng imahe ay ang proseso ng pagbabago ng laki, dimensyon, o resolusyon ng isang imahe, na karaniwang ginagawa upang magkasya ito sa iba&#039;t ibang mga medium ng output o mabawasan ang laki ng file. Mahalagang maging maingat sa pagbabago ng laki ng mga imahe dahil maaari itong makaapekto sa kanilang kalidad at kalinawan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ano ang isang image resizer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ang isang online na tool para sa pagpapalit ng laki ng mga imahe ay tinatawag na image resizer. Anumang imahe, kabilang ang mga JPG, PNG, at WebP file, ay maaaring baguhin ang laki gamit ang application na ito. Gumagana ito agad sa anumang browser na pinagana ng JavaScript at ganap na nakabatay sa web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paano Palitan ang Sukat ng Isang Larawan Online?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ang pagpapalit ng laki ng mga larawan online ay isang napakadaling gawain gamit ang aming tool. Narito ang mga hakbang para baguhin ang laki ng isang larawan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buksan ang tool at pumili ng larawan mula sa iyong telepono o computer.<\/li>\n\n\n\n<li>Ilagay ang taas at lapad ng bagong larawang gusto mo.<\/li>\n\n\n\n<li>Piliin ang format ng larawan na kailangan mo para sa bagong larawan.<\/li>\n\n\n\n<li>Pindutin ang buton na &quot;resize&quot; at i-preview ang bagong laki ng larawan.<\/li>\n\n\n\n<li>I-click ang button na &quot;download&quot; at i-save ito sa iyong device.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Mula sa itaas, ang bagong laki ng larawan ay mase-save sa iyong device. Ngayon ay maaari mo na itong gamitin kahit saan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ilang Format ng Imahe ang Sinusuportahan Nito?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sa kasalukuyan, sinusuportahan namin ang tatlong pinakasikat na format ng imahe na JPEG, PNG at WebP na malawakang ginagamit.<\/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\/tl\/wp-json\/wp\/v2\/pages\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages\/1529\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages\/1529\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/media?parent=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}