anandchakru/webp2png.html

## webp2png.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>
	<!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>