How do I convert webp data URI to png

Question

I have converted the webp image to png by using WePJS on the fly. But this library works only in image file like "abc.webp". It does not convert into png image from webp image made by something like "data:image/webp;base64,UklGRvYRAABXRUJQ....."

Is there any other way/framework by which I can get the result I need ?

For example below example works in chrome but not in firefox

(function(){
  var WebP=new Image();
  WebP.src="data:image/webp;base64,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";
  document.getElementById('imageWrapper').appendChild(WebP);
})();

<div id="imageWrapper"></div>

score 0 · Answer 1 · answered Oct 31 '16 at 07:16

0

ImageMagick sounds like the swiss army knife you need.

answered Oct 31 '16 at 07:16

rmharrison

4,730
2
20
35

1

Thanks for answer but I need the solution in javascript. – Suman Bogati Oct 31 '16 at 07:18
ImageMagick has a 3rd-party SDK in basically every language, e.g. Javascript: https://github.com/aheckmann/gm – rmharrison Oct 31 '16 at 07:22
He needs the solution to work in-browser. ImageMagick's language bindings are irrelevant. – Stijn de Witt Mar 14 '17 at 20:45

score 0 · Answer 2 · edited May 23 '17 at 12:32

This solution might be what you are looking for:

webp2png.js

It uses libwebpjs to decode a webp image, writes the image data to a canvas and then uses HTMLCanvasElement.toDataURL to greate a data URI for a png image.

Get the data from a data URL

For this, notice that the data URL starts with data:image/webp;base64,. Grab the part of the string that follows this header (so everything from UklGRv... to the end of the string) and use a base 64 decoder to turn it into a data array.

score 0 · Answer 3 · answered Aug 22 '23 at 19:27

How to convert webp to png, using plain simple js/html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Bulk convert WebP to png created by anandchakru</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }

      .container {
        text-align: center;
      }

      h1 {
        margin-bottom: 10px;
      }
      h3 {
        color: #777;
      }

      input[type='file'] {
        margin-bottom: 10px;
      }

      button {
        padding: 8px 16px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 4px;
      }
      button#cleanupButton {
        display: none;
        text-align: center;
      }

      #output {
        margin-top: 20px;
      }
      div.desc {
        margin-bottom: 25px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>WebP to PNG Converter</h1>
      <h3>
        By <a href="https://rathnas.com">anandchakru</a> Hosted
        <a href="https://free-online-webp-to-png.stackblitz.io/">here</a>
      </h3>
      <div class="desc">Free online tool to convert webp to png</div>
      <input type="file" id="fileInput" accept=".webp" multiple />
      <button id="convertButton">Convert to PNG</button>
      <div id="output"></div>
      <button id="cleanupButton">Cleanup</button>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('fileInput');
        const convertButton = document.getElementById('convertButton');
        const cleanupButton = document.getElementById('cleanupButton');
        const outputDiv = document.getElementById('output');
        cleanupButton.addEventListener('click', function () {
          outputDiv.innerHTML = ''; // Clear previous output
          cleanupButton.style.display = 'none';
        });

        convertButton.addEventListener('click', function () {
          const files = fileInput.files;
          outputDiv.innerHTML = ''; // Clear previous output
          if (files.length > 0) cleanupButton.style.display = 'unset';
          for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();

            reader.onload = function (event) {
              const img = new Image();
              img.src = event.target.result;

              img.onload = function () {
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                const outputImg = new Image();
                outputImg.src = canvas.toDataURL('image/png');

                // Create a download link for the converted PNG
                const link = document.createElement('a');
                link.href = outputImg.src;
                link.download = file.name.replace('.webp', '.png'); // Use the same name, replace extension
                link.textContent = link.download;
                outputDiv.appendChild(link);
                outputDiv.appendChild(document.createElement('br'));
                outputDiv.appendChild(document.createElement('br'));
              };
            };
            reader.readAsDataURL(file);
          }
        });
      });
    </script>
  </body>
</html>

Working live example https://free-online-webp-to-png.stackblitz.io/

Source code https://stackblitz.com/edit/free-online-webp-to-png?file=index.html

How do I convert webp data URI to png

3 Answers3

webp2png.js