{"id":559,"date":"2026-07-07T18:01:57","date_gmt":"2026-07-07T18:01:57","guid":{"rendered":"https:\/\/toolibee.com\/?page_id=559"},"modified":"2026-07-07T18:01:57","modified_gmt":"2026-07-07T18:01:57","slug":"image-resizer","status":"publish","type":"page","link":"https:\/\/toolibee.com\/?page_id=559","title":{"rendered":"Image Resizer"},"content":{"rendered":"        <div class=\"toolibee-image-resizer\" data-toolibee-image-resizer>\n            <div class=\"toolibee-card toolibee-hero-card\">\n                <div>\n                    <p class=\"toolibee-kicker\">Toolibee Image Tool<\/p>\n                    <h2>Image Resizer + Cropper<\/h2>\n                    <p>Upload an image, crop with pixel rulers, resize to exact dimensions, preview, and download.<\/p>\n                <\/div>\n                <div class=\"toolibee-bee-badge\" aria-hidden=\"true\">\ud83d\udc1d<\/div>\n            <\/div>\n\n            <div class=\"toolibee-grid\">\n                <section class=\"toolibee-card toolibee-panel\">\n                    <h3>1. Upload Image<\/h3>\n                    <label class=\"toolibee-upload-box\">\n                        <input type=\"file\" accept=\"image\/png,image\/jpeg,image\/webp,image\/gif\" data-image-input>\n                        <span>Choose image<\/span>\n                        <small>PNG, JPG, WebP, or GIF<\/small>\n                    <\/label>\n                    <div class=\"toolibee-file-info\" data-file-info hidden><\/div>\n\n                    <h3>2. Crop Area<\/h3>\n                    <p class=\"toolibee-help\">Drag the crop box on the image or type exact pixel values below.<\/p>\n                    <div class=\"toolibee-form-row four\">\n                        <label>X <input type=\"number\" min=\"0\" step=\"1\" data-crop-x><\/label>\n                        <label>Y <input type=\"number\" min=\"0\" step=\"1\" data-crop-y><\/label>\n                        <label>W <input type=\"number\" min=\"1\" step=\"1\" data-crop-w><\/label>\n                        <label>H <input type=\"number\" min=\"1\" step=\"1\" data-crop-h><\/label>\n                    <\/div>\n                    <div class=\"toolibee-button-row compact\">\n                        <button type=\"button\" class=\"toolibee-button secondary\" data-full-crop-button disabled>Use Full Image<\/button>\n                        <button type=\"button\" class=\"toolibee-button secondary\" data-square-crop-button disabled>Square Crop<\/button>\n                    <\/div>\n\n                    <h3>3. Resize Output<\/h3>\n                    <div class=\"toolibee-form-row\">\n                        <label>Output Width <input type=\"number\" min=\"1\" step=\"1\" data-width-input placeholder=\"Width px\"><\/label>\n                        <label>Output Height <input type=\"number\" min=\"1\" step=\"1\" data-height-input placeholder=\"Height px\"><\/label>\n                    <\/div>\n                    <label class=\"toolibee-checkbox\"><input type=\"checkbox\" data-lock-ratio checked> Keep crop aspect ratio<\/label>\n\n                    <div class=\"toolibee-form-row\">\n                        <label>Output format\n                            <select data-format-select>\n                                <option value=\"image\/png\">PNG<\/option>\n                                <option value=\"image\/jpeg\">JPG<\/option>\n                                <option value=\"image\/webp\">WebP<\/option>\n                            <\/select>\n                        <\/label>\n                        <label>JPG\/WebP quality <input type=\"range\" min=\"0.1\" max=\"1\" step=\"0.05\" value=\"0.92\" data-quality-input><\/label>\n                    <\/div>\n\n                    <div class=\"toolibee-button-row\">\n                        <button type=\"button\" class=\"toolibee-button\" data-apply-button disabled>Crop + Resize<\/button>\n                        <button type=\"button\" class=\"toolibee-button secondary\" data-reset-button disabled>Reset<\/button>\n                    <\/div>\n                <\/section>\n\n                <section class=\"toolibee-card\">\n                    <h3>Crop Workspace<\/h3>\n                    <div class=\"toolibee-ruler-shell\" data-ruler-shell>\n                        <div class=\"toolibee-ruler top\" data-ruler-top><\/div>\n                        <div class=\"toolibee-ruler left\" data-ruler-left><\/div>\n                        <div class=\"toolibee-stage\" data-stage>\n                            <canvas data-source-canvas><\/canvas>\n                            <div class=\"toolibee-crop-box\" data-crop-box hidden>\n                                <span class=\"handle nw\" data-handle=\"nw\"><\/span>\n                                <span class=\"handle ne\" data-handle=\"ne\"><\/span>\n                                <span class=\"handle sw\" data-handle=\"sw\"><\/span>\n                                <span class=\"handle se\" data-handle=\"se\"><\/span>\n                                <span class=\"toolibee-crop-label\" data-crop-label><\/span>\n                            <\/div>\n                            <p data-empty-preview>Upload an image to begin.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <h3 class=\"toolibee-preview-title\">Output Preview<\/h3>\n                    <div class=\"toolibee-preview-wrap\">\n                        <canvas data-preview-canvas><\/canvas>\n                        <p data-empty-output>Crop and resize to see the output preview.<\/p>\n                    <\/div>\n                    <div class=\"toolibee-output-info\" data-output-info hidden><\/div>\n                    <a class=\"toolibee-download\" data-download-link hidden download=\"toolibee-edited-image.png\">Download edited image<\/a>\n                <\/section>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-559","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=559"}],"version-history":[{"count":1,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/559\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/559\/revisions\/560"}],"wp:attachment":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}