Question

我将webp图像改为png,使用。但是,该图书馆只在像>abc.webp”等图像档案中开展工作。它不会从webp的图像转换成png。诸如<代码>的数据:image/webp;base64,Ukl GvYRAABXRUJQ...

是否有其他方式/框架,我可以得出我需要的结果?

举例说,在霍ome,但并非在燃烧中。

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

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

Answer 1

ImageMagick sounds like the swiss army knife you need.

Answer 2

这一解决办法或许是你寻求的:

webp2png.js

它使用libwebpjs ,将图像数据输入网上图像,然后使用 >turrentreer"> 传真CanvasElementto.DataURL/

Get the data from a data URL

为此,注意到URL的数据始于data:image/webp;base64,。缩略语中继这一标题的部分(从......至扼制末”),并使用将其变成一个数据阵列。

Answer 3

• 如何使用简单的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>

工作现场实例 https://free-online-webp-to-png.stackblitz.io/

资料来源:https://stackblitz.com/edit/free-online-webp-to-png?file=index.html 。

webp2png.js

友情链接