{"id":16916,"date":"2024-05-20T20:48:46","date_gmt":"2024-05-20T20:48:46","guid":{"rendered":"https:\/\/bestsoln.com\/web\/?page_id=16916"},"modified":"2024-05-23T20:32:44","modified_gmt":"2024-05-23T20:32:44","slug":"image-editor","status":"publish","type":"page","link":"https:\/\/bestsoln.com\/web\/web-tool\/image-editor\/","title":{"rendered":"Image Editor"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\t\t\t<!-- Flexy Breadcrumb -->\r\n\t\t\t<div class=\"fbc fbc-page\">\r\n\r\n\t\t\t\t<!-- Breadcrumb wrapper -->\r\n\t\t\t\t<div class=\"fbc-wrap\">\r\n\r\n\t\t\t\t\t<!-- Ordered list-->\r\n\t\t\t\t\t<ol class=\"fbc-items\" itemscope itemtype=\"https:\/\/schema.org\/BreadcrumbList\">\r\n\t\t\t\t\t\t            <li itemprop=\"itemListElement\" itemscope itemtype=\"https:\/\/schema.org\/ListItem\">\r\n                <span itemprop=\"name\">\r\n                    <!-- Home Link -->\r\n                    <a itemprop=\"item\" href=\"https:\/\/bestsoln.com\/web\">\r\n                    \r\n                                                    <i class=\"fa fa-home\" aria-hidden=\"true\"><\/i>Home                    <\/a>\r\n                <\/span>\r\n                <meta itemprop=\"position\" content=\"1\" \/><!-- Meta Position-->\r\n             <\/li><li><span class=\"fbc-separator\">\/<\/span><\/li><li class=\"active\" itemprop=\"itemListElement\" itemscope itemtype=\"https:\/\/schema.org\/ListItem\"><span itemprop=\"name\" title=\"Image Editor\">Image Editor<\/span><meta itemprop=\"position\" content=\"2\" \/><\/li>\t\t\t\t\t<\/ol>\r\n\t\t\t\t\t<div class=\"clearfix\"><\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">About Image Editor<\/h2>\n\n\n\n<p class=\"jusfy\">The Image Editor is a web-based tool designed for simple and quick image adjustments using JavaScript. This editor allows users to apply various filters, and rotate, and flip images with an intuitive interface. It provides a straightforward way to enhance images without the need for complex software.<\/p>\n\n\n\n<p>Found a bug? <a href=\"https:\/\/bestsoln.com\/web\/contact-us\/\">Raise a bug here!<\/a><\/p>\n\n\n\n<div class=\"wp-block-group has-border-color is-layout-constrained wp-container-core-group-is-layout-283b4700 wp-block-group-is-layout-constrained\" style=\"border-color:#ff6900;border-width:2px;border-radius:10px;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<h2 class=\"wp-block-heading jusfy\">Edit Image<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-4e0443d7 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--20)\"><link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/boxicons@2.1.2\/css\/boxicons.min.css\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.1.1\/css\/all.min.css\" \/>\r\n\r\n<div style=\"display:block\">\r\n    <div class=\"container disable\">\r\n        <div class=\"wrapper\">\r\n            <div class=\"editor-panel\">\r\n                <div class=\"filter\">\r\n                    <label class=\"title\">Filters<\/label>\r\n                    <div class=\"options\">\r\n                        <button id=\"brightness\" class=\"active\">Brightness<\/button>\r\n                        <button id=\"saturation\">Saturation<\/button>\r\n                        <button id=\"inversion\">Inversion<\/button>\r\n                        <button id=\"grayscale\">Grayscale<\/button>\r\n                    <\/div>\r\n                    <div class=\"slider\">\r\n                        <div class=\"filter-info\">\r\n                            <p class=\"name\">Brighteness<\/p>\r\n                            <p class=\"value\">100%<\/p>\r\n                        <\/div>\r\n                        <input type=\"range\" value=\"100\" min=\"0\" max=\"200\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"rotate\">\r\n                    <label class=\"title\">Rotate & Flip<\/label>\r\n                    <div class=\"options\">\r\n                        <button id=\"left\"><i class=\"fa-solid fa-rotate-left\"><\/i><\/button>\r\n                        <button id=\"right\"><i class=\"fa-solid fa-rotate-right\"><\/i><\/button>\r\n                        <button id=\"horizontal\"><i class='bx bx-reflect-vertical'><\/i><\/button>\r\n                        <button id=\"vertical\"><i class='bx bx-reflect-horizontal'><\/i><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"preview-img\">\r\n                <img decoding=\"async\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0533\/2089\/files\/placeholder-images-image_large.png?format=jpg&amp;quality=90&amp;v=1530129081\" alt=\"preview-img\" title=\"\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"controls\">\r\n            <button class=\"reset-filter\">Reset Filters<\/button>\r\n            <div class=\"row\">\r\n                <input type=\"file\" class=\"file-input\" accept=\"image\/*\" hidden>\r\n                <button class=\"choose-img\">Choose Image<\/button>\r\n                <button class=\"save-img\">Save Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading jusfy\">How to Use Image Editor?<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: <strong>Choose an Image<\/strong><\/h3>\n\n\n\n<p>Click the &#8220;Choose Image&#8221; button to upload an image from your device. This opens a file dialog where you can select your desired image.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: <strong>Apply Filters<\/strong><\/h3>\n\n\n\n<p><strong>Brightness:<\/strong> Adjust the brightness of the image using the &#8220;Brightness&#8221; button and the slider below it.<\/p>\n\n\n\n<p><strong>Saturation:<\/strong> Change the saturation levels by clicking the &#8220;Saturation&#8221; button and using the slider.<\/p>\n\n\n\n<p><strong>Inversion:<\/strong> Apply a color inversion effect with the &#8220;Inversion&#8221; button.<\/p>\n\n\n\n<p><strong>Grayscale:<\/strong> Convert the image to grayscale by clicking the &#8220;Grayscale&#8221; button.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: <strong>Adjust Filter Intensity<\/strong><\/h3>\n\n\n\n<p>Use the slider under the filter options to fine-tune the intensity of the selected filter. The filter name and its current value will be displayed above the slider.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: <strong>Rotate and Flip<\/strong><\/h3>\n\n\n\n<p><strong>Rotate Left:<\/strong> Click the button with the left rotation icon to rotate the image counterclockwise.<\/p>\n\n\n\n<p><strong>Rotate Right:<\/strong> Use the right rotation icon button to rotate the image clockwise.<\/p>\n\n\n\n<p><strong>Flip Horizontally:<\/strong> The vertical reflect icon flips the image along the horizontal axis.<\/p>\n\n\n\n<p><strong>Flip Vertically:<\/strong> The horizontal reflect icon flips the image along the vertical axis.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: <strong>Reset Filters<\/strong><\/h3>\n\n\n\n<p>If you want to undo all applied filters and adjustments, click the &#8220;Reset Filters&#8221; button to revert the image to its original state.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: <strong>Save the Image<\/strong><\/h3>\n\n\n\n<p>Once you are satisfied with your edits, click the &#8220;Save Image&#8221; button to download the edited image to your device.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"jusfy\">This tool offers a convenient and accessible way to edit images directly in your browser, perfect for quick edits and adjustments.<\/p>\n\n\n\n<ol class=\"jusfy wp-block-list\">\n<li><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>About Image Editor The Image Editor is a web-based tool designed for simple and quick image adjustments using JavaScript. This editor allows users to apply various filters, and rotate, and flip images with an intuitive interface. It provides a straightforward&#8230;<\/p>\n","protected":false},"author":1,"featured_media":17347,"parent":17430,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-web-tools-right-sidebar","meta":{"googlesitekit_rrm_CAow1snDDA:productID":"","MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","footnotes":""},"class_list":["post-16916","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/16916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/comments?post=16916"}],"version-history":[{"count":5,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/16916\/revisions"}],"predecessor-version":[{"id":16941,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/16916\/revisions\/16941"}],"up":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/17430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/media\/17347"}],"wp:attachment":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/media?parent=16916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}