{"id":1944,"date":"2023-02-15T11:16:38","date_gmt":"2023-02-15T11:16:38","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=627"},"modified":"2023-05-08T17:13:25","modified_gmt":"2023-05-08T17:13:25","slug":"image-inverter","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/pt\/image-inverter\/","title":{"rendered":"Image Inverter"},"content":{"rendered":"<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><h1>Image Inverter<\/h1>\n\n<input type=\"file\" id=\"image-input\" onchange=\"loadImage()\"><br><br>\n  <canvas id=\"image-canvas\" width=\"400\" height=\"100%\"><\/canvas><br>\n  <select id=\"filter-select\" onchange=\"applyFilter()\">\n    <option value=\"none\">None<\/option>\n    <option value=\"grayscale\">Grayscale<\/option>\n    <option value=\"sepia\">Sepia<\/option>\n    <option value=\"invert\">Invert<\/option>\n  <\/select><br>\n  <button id=\"download-button\" onclick=\"downloadImage()\">Download as PNG<\/button><br><br>\n  <\/section>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/1.3.8\/FileSaver.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/js-png-encoder@0.1.1\/png-encoder.min.js\"><\/script>\n  <script>\n    var imageCanvas = document.getElementById(\"image-canvas\");\n    var imageCtx = imageCanvas.getContext(\"2d\");\n    var imageData;\n    \n    function loadImage() {\n      var input = document.getElementById(\"image-input\");\n      var image = new Image();\n      image.onload = function() {\n        imageCanvas.width = image.width;\n        imageCanvas.height = image.height;\n        imageCtx.drawImage(image, 0, 0);\n        imageData = imageCtx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);\n      }\n      image.src = URL.createObjectURL(input.files[0]);\n    }\n    \n    function applyFilter() {\n      var filterSelect = document.getElementById(\"filter-select\");\n      var filter = filterSelect.value;\n      if (filter === \"none\") {\n        imageCtx.putImageData(imageData, 0, 0);\n      } else if (filter === \"grayscale\") {\n        applyGrayscaleFilter();\n      } else if (filter === \"sepia\") {\n        applySepiaFilter();\n            } else if (filter === \"invert\") {\n        applyInvertFilter();\n      }\n    }\n    \n    function applyGrayscaleFilter() {\n      var data = imageData.data;\n      for (var i = 0; i < data.length; i += 4) {\n        var gray = (data[i] + data[i + 1] + data[i + 2]) \/ 3;\n        data[i] = gray;\n        data[i + 1] = gray;\n        data[i + 2] = gray;\n      }\n      imageCtx.putImageData(imageData, 0, 0);\n    }\n    \n    function applySepiaFilter() {\n      var data = imageData.data;\n      for (var i = 0; i < data.length; i += 4) {\n        var r = data[i];\n        var g = data[i + 1];\n        var b = data[i + 2];\n        data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);\n        data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);\n        data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131);\n      }\n      imageCtx.putImageData(imageData, 0, 0);\n    }\n    \n    function applyInvertFilter() {\n      var data = imageData.data;\n      for (var i = 0; i < data.length; i += 4) {\n        data[i] = 255 - data[i];\n        data[i + 1] = 255 - data[i + 1];\n        data[i + 2] = 255 - data[i + 2];\n      }\n      imageCtx.putImageData(imageData, 0, 0);\n    }\n    \n    function downloadImage() {\n      var imageDataURL = imageCanvas.toDataURL(\"image\/png\");\n      var imageBlob = dataURLtoBlob(imageDataURL);\n      saveAs(imageBlob, \"filtered-image.png\");\n    }\n    \n    function dataURLtoBlob(dataURL) {\n      var byteString = atob(dataURL.split(\",\")[1]);\n      var mimeString = dataURL.split(\",\")[0].split(\":\")[1].split(\";\")[0];\n      var arrayBuffer = new ArrayBuffer(byteString.length);\n      var intArray = new Uint8Array(arrayBuffer);\n      for (var i = 0; i < byteString.length; i++) {\n        intArray[i] = byteString.charCodeAt(i);\n      }\n      return new Blob([intArray], { type: mimeString });\n    }\n  <\/script>\n\n\n\n<br><hr>\n\n\n<style>\n\nsection{text-align:center}\n\n\/* Button Styles *\/\nbutton, .button, #button, btn, .btn, #btn, downloadlink,  #download-button, #button-copy, button-copy, copy-button, #copy-button, #copy, copy, #download-html-button{\n  display: inline-block;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 30px;\n  background-image: linear-gradient(to right, #0088FF, #0088FF);\n  border: 3px solid #fff;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  margin:0 auto;\n  margin-top:11px;\n  margin-bottom:11px;\n  text-shadow: 2px 2px 4px #333;\n}\n\n\/* Button Hover State *\/\nbutton:hover {\n  background-image: linear-gradient(to right, #FF1493, #FF1493);\n  border: 3px solid #ffffff;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n -input{\n  width: 25%;\n  height: 100%;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ninput[type=file]::file-selector-button {\n  display: inline-block;\n  padding: 1.0rem 1rem;\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: #fff;\n  text-align: center;\n  text-transform: uppercase;\n  background-color: #0088FF;\n  border-radius: 0rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n  border: 0px solid #fff;\n  width:100%;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n}\n\ninput[type=file]::file-selector-button:hover {\n  background-color: #5b52d6;\n}\n\ninput[type=file]::file-selector-button:active {\n  background-color: #4a41ad;\n}\n\ninput[type=file]::file-selector-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c63ff;\n}\n\ninput[type=file]::file-selector-button::before {\n  content: \"Select File\";\n}\n\ninput[type=file]::file-selector-button::before,\ninput[type=file]::file-selector-button::before {\n  content: \"\\2193 Browse Files\";\n}\n\n\ninput[type=\"file\"] {\n  display: yes;\n}\ninput[type=\"text\"], input[type=\"url\"] {\n  width: 80%;\n  height: 50px;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\ninput[type=\"number\"], select {\n  width: 30%;\n  height: 50px;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ntextarea {\n  width: 100%;\n  height: 170px;\n  padding: 10px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ntextarea:hover {\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\ncanvas, #image-container, .img, #img, image, .image, #image, #convertedImage, #preview-image {\n  border: 5px solid;\n  border-image: linear-gradient(to bottom, #007bff, #00f260);\n  border-image-slice: 1;\n  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);\n  margin-top:10px;margin-bottom:10px;\n  width:90%;\n  margin:0 auto;padding:15px;\n\n}\n\n#image-container img {\n  max-width: 100%;\n  }\n\ncode, pre, .result, output, #output, .output {\n  font-family: Monaco, Consolas, \"Andale Mono\", \"DejaVu Sans Mono\", monospace;\n  font-size: 0.9em;\n  color: #333;\n  background-color: #f9f9f9;\n  padding: 0.2em 0.4em;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  white-space: pre-wrap;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n  width:100%;\n  padding:15px;\n\n}\n\n\ninput[type=\"range\"] {\n  -webkit-appearance: none;\n  width: 80%;\n  background: transparent;\n  height: 10px;\n  border-radius: 5px;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: inset 0 0 5px #333;\n  transition: box-shadow 0.2s;\n  margin-top:10px;\n\n}\n\ninput[type=\"range\"]:focus {\n  box-shadow: inset 0 0 5px #888;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  background: #4CAF50;\n  cursor: pointer;\n  transition: background 0.2s;\n  margin-top:-5px;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n  background: #3e8e41;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  background: #ddd;\n  border-radius: 5px;\n  border: none;\n}\ninput[type=\"checkbox\"] {\n  appearance: none;\n  width: 45px;\n  height: 25px;\n  background: transparent;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;  border-radius: 5px;\n  margin: 10px;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n}\n\ninput[type=\"checkbox\"]:before {\n  content: \"\";\n  width: 15px;\n  height: 15px;\n  background: #D209A4;\n  border-radius: 100px;\n  position: absolute;\n  left: 2px;\n  \n  top: 3px;\n  transition: all 0.2s;\n}\n\ninput[type=\"checkbox\"]:checked:before {\n  transform: translateX(20px);\n}\n\ninput[type=\"checkbox\"]:focus {\n  border: 2px solid #888;\n}\ninput[type=\"radio\"] {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #333;\n  margin-right: 10px;\n  outline: none;\n  position: relative;\n  cursor: pointer;\n}\n\ninput[type=\"radio\"]:after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #333;\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  opacity: 0;\n  transition: all 0.2s;\n}\n\ninput[type=\"radio\"]:checked:after {\n  opacity: 1;\n}\n\ninput[type=\"radio\"]:focus {\n  border-color: #888;\n}\n\n\ninput[type=\"radio\"] {\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n}\n\nlabel {\n  display: block; \/* makes each label appear on a new line *\/\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 5px; \/* adds a small gap below each label *\/\n  color:#55555e;\n  margin-top:11px;margin-bottom:11px;\n}\n\ninput[type=\"color\"]{width:17.2%;}\n.form-control {\n    display: block;\n    margin:0 auto;\n    width: 70%;\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5;\n    color: #212529;\n    background-color: #fff;\n    background-clip: padding-box;\n    border: 1px solid #ced4da;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0.25rem;\n    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\n}\nsection{\n        margin: 0px auto;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 20px;\n      }\n<\/style>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-bi-tools.png\" alt=\"image inverter bi tools\" class=\"wp-image-3614\" srcset=\"https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-bi-tools.png 1024w, https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-bi-tools-300x150.png 300w, https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-bi-tools-768x384.png 768w, https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-bi-tools-18x9.png 18w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Are you looking for the best image inverter tool to use for your next project? Look no further as we have compiled a list of the best image inverter tools in the market today. As an experienced SEO and copywriter, we understand the importance of creating high-quality content that outranks other websites on Google. That's why we've created this article to help you outrank the competition when it comes to the topic of Image Inverters. Our goal is to provide you with a comprehensive guide on the benefits of Image Inverter and how it can improve your website's SEO.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Image Inverter?<\/strong><\/h2>\n\n\n\n<p>Image Inverter is a tool used to reverse the colors of an image. This means that the black becomes white, and the white becomes black. Image Inverter is commonly used for accessibility purposes, as it makes it easier for people with visual impairments to read text on a webpage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why use Images Inverter?<\/strong><\/h2>\n\n\n\n<p>An image inverter is a tool that allows you to invert the colors of your images. Inverting colors means that the colors of your image are reversed, so that the areas that were originally white become black, and the areas that were originally black become white. The colors in between are also inverted in the same way. This creates a negative image that can be used for artistic or practical purposes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Should You Invert Images?<\/strong><\/h2>\n\n\n\n<p>There are several reasons why you might want to invert images, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creating a new look:<\/strong> Inverting an image can give it a completely different look and feel. This can be useful in creating unique designs or adding a fresh twist to an existing image.<\/li>\n\n\n\n<li><strong>Enhancing visibility:<\/strong> In some cases, inverting an image can enhance its visibility, making it stand out more clearly. This is particularly useful when working with low-contrast images or when trying to emphasize certain elements of an image.<\/li>\n\n\n\n<li><strong>Correcting color issues:<\/strong> Sometimes, an image might have color issues that make it look unnatural or unappealing. Inverting the image can help correct these issues and create a more visually appealing result.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Use an Image Inverter<\/strong><\/h2>\n\n\n\n<p>Using an image inverter is relatively simple. Most image editing software programs come with an image inverter feature that you can use to reverse the colors of your images. To use an image inverter, simply open your image editing software program and select the image you want to invert. Then, find the image inverter tool and select it. The software will then reverse the colors of your image, creating a unique and eye-catching effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Benefits of Using an Image Inverter<\/strong><\/h2>\n\n\n\n<p>One of the biggest benefits of using an image inverter is that it allows you to create unique and eye-catching photos. By reversing the colors in your images, you can create a surreal and otherworldly effect that will make your photos stand out from the crowd. This effect can be especially effective in landscape and nature photography, where the colors of the sky and foliage can be inverted to create a dramatic and otherworldly effect.<\/p>\n\n\n\n<p>Another benefit of using an image inverter is that it can help you bring out hidden details in your photos. By inverting the colors, you can reveal details that might not be visible in the original photo. For example, inverting the colors of a black-and-white photo can bring out details in the shadows and highlights that might be lost in the original photo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Online Image Inverter <\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Adobe Photoshop<\/strong> - Adobe Photoshop is a popular image editing software that has been used by professionals for many years. With its advanced features, you can easily invert images and manipulate them according to your needs. Whether you want to create a dramatic effect or just want to experiment with colors, Adobe Photoshop is the perfect tool for you.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>GIMP<\/strong> - GIMP or GNU Image Manipulation Program is free and open-source software that is used for image editing, retouching, and other graphic designing tasks. GIMP offers advanced features such as layers, masks, and filters, making it a powerful tool for inverting images.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong><a href=\"https:\/\/tools.billionsideas.com\/pt\/image-inverter\/\">BI Tool<\/a><\/strong> - <strong>BI Tool<\/strong> is an easy-to-use image editing software that is perfect for beginners. It offers a variety of tools and effects that you can use to invert images and achieve stunning results. <strong>BI Tool <\/strong>is also lightweight, making it a great option for users with low-end computers.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Pixlr<\/strong> - Pixlr is an online image editing software that is perfect for users who do not want to download any software on their computers. With Pixlr, you can easily invert images, adjust brightness and contrast, and add filters and effects. It also has a user-friendly interface, making it easy to use even for beginners.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong>Canva <\/strong>- Canva is a popular graphic designing software that is used for creating social media graphics, posters, and other marketing materials. It also offers an image inverter tool that allows you to invert images and achieve stunning results. With its drag-and-drop interface, you can easily create designs even if you have no prior design experience.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In conclusion, using an Image Inverter for your website can have many benefits, including improved accessibility, enhanced user experience, and increased SEO. By making your website more accessible, you can improve your chances of ranking higher in search results, which can lead to more traffic and better conversion rates. So, if you haven't already, it's time to consider using an Image Inverter for your website.<\/p>","protected":false},"excerpt":{"rendered":"<p>Image Inverter NoneGrayscaleSepiaInvert Download as PNG Are you looking for the best image inverter tool to use for your next project? Look no further as we have compiled a list of the best image inverter tools in the market today. As an experienced SEO and copywriter, we understand the importance of creating high-quality content that &#8230; <a title=\"Image Inverter\" class=\"read-more\" href=\"https:\/\/tools.billionsideas.com\/pt\/image-inverter\/\" aria-label=\"Read more about Image Inverter\">Leia mais<\/a><\/p>","protected":false},"author":1,"featured_media":3615,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1944","page","type-page","status-publish","has-post-thumbnail"],"taxonomy_info":[],"featured_image_src_large":["https:\/\/tools.billionsideas.com\/wp-content\/uploads\/2023\/04\/image-inverter-online.png",800,500,false],"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/pt\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages\/1944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/comments?post=1944"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/pages\/1944\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/media\/3615"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/pt\/wp-json\/wp\/v2\/media?parent=1944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}