Skip to main content

Free online tool to convert jpg, png, gif, ico to webp image format online.

Free online tool to convert jpg, png, gif, ico to webp image format online. No upload, just select image in tool and click convert to webp button. Once converted, download button is enabled to download webp image.

Here is a sample HTML, CSS, and JavaScript code that you can use to create a simple online tool to convert JPG, PNG, GIF, and ICO images to the WebP format: 

<!-- HTML -->
<html>
  <head>
    <title>Image Converter</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Image Converter</h1>
    <input type="file" id="input-file" accept=".jpg,.png,.gif,.ico">
    <button id="convert-button">Convert to WebP</button>
    <a id="download-link" download="converted.webp">Download</a>
    <script src="script.js"></script>
  </body>
</html>

/* CSS */
#input-file {
  display: none;
}

#convert-button {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#download-link {
  display: none;
  font-size: 1.2em;
  background-color: #00bcd4;
  color: white;
  padding: 0.5em 1em;
  border-radius: 4px;
  text-decoration: none;
}

// JavaScript
function convertToWebp(file, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    var image = new Image();
    image.onload = function() {
      var canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      canvas.getContext('2d').drawImage(image, 0, 0);

      var webpData = canvas.toDataURL('image/webp');
      callback(webpData);
    };
    image.src = reader.result;
  };
  reader.readAsDataURL(file);
}

document.querySelector('#input-file').addEventListener('change', function() {
  var file = this.files[0];
  convertToWebp(file, function(webpData) {
    document.querySelector('#download-link').href = webpData;
    document.querySelector('#download-link').style.display = 'inline-block';
  });
});

document.querySelector('#convert-button').addEventListener('click', function() {
  document.querySelector('#input-file').click();
});

This code creates a file input field that allows the user to select an image file, a "Convert" button that initiates the conversion process, and a "Download" link that is displayed once the conversion is complete. The JavaScript code uses the FileReader API to read the selected file, creates an image element and draws the image onto a canvas, and then uses the canvas.toDataURL() method to convert the image data to the WebP format

Comments

Popular posts from this blog

C++ Programming Tutorial - How to Install Code::Blocks in Ubuntu Linux - Learn Online

Installing Code::Blocks How do I Install Code::Blocks HOWTO: Installing Code::Blocks 10.05 How do you install Irrlicht on Code::Blocks? How do you install CodeBlock on ubuntu? codeblocks /bin/sh: g++: not found Installing codeblocks on ubuntu Installing Code::Blocks on Ubuntu 10.04?

Google Fight Against Low Quality and Spammy Content

  Google's ongoing battle against spammy and low-quality content in search results is an essential aspect of maintaining the platform's credibility and usefulness. Here are some of the new strategies and policies Google is implementing to combat these issues: Improved Quality Ranking : Google is enhancing its core ranking algorithms to prioritize high-quality and original content while reducing the visibility of unoriginal or spammy content in search results. New Spam Policies : Google is updating its spam policies to address emerging tactics used by spammers. This includes targeting practices such as expired websites repurposed as spam repositories, obituary spam, and other manipulative behaviors. Reducing Unoriginal Results : Google is refining its ranking systems to identify and minimize unhelpful, unoriginal content. This includes pages created specifically to match certain search queries and content that prioritizes search engine optimization over user experience. Scaled C

How to Share Folders in Ubuntu Guest with Windows 7 Host using VirtualBox - Learn Online

Oracle VirtualBOX: mounting Windows 7 host folder into guest Oracle VirtualBOX: mounting Windows 7 host folder into guest Sharing folders between Ubuntu guest and Windows Host How to access windows host shared folders from ubuntu guest Share folder between Windows (Host) and Ubuntu (Guest) VirtualBox: access Windows-host shared folders from Ubuntu-guest Access VirtualBox Shared Folder from Ubuntu 12.04