基于javascript实现的JPG图片转PNG图片在线工具

使用方法

const fileInput = document.getElementById('file-input');
    const convertBtn = document.getElementById('convert-btn');
    const downloadBtn = document.getElementById('download-btn');
    const imagePreview = document.getElementById('image-preview');
    const resetBtn = document.getElementById('reset-btn');

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const imageUrl = reader.result;
          imagePreview.innerHTML = `
            <img src="${imageUrl}" alt="Image Preview">
          `;
          downloadBtn.style.display = 'none';
        };
      }
    });

    convertBtn.addEventListener('click', () => {
      const canvas = document.createElement('canvas');
      const img = document.createElement('img');
      img.src = imagePreview.querySelector('img').src;
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        downloadBtn.href = url;
        downloadBtn.style.display = 'block';
      }, 'image/png');
    });

    resetBtn.addEventListener('click', () => {
      fileInput.value = '';
      imagePreview.innerHTML = '';
      downloadBtn.style.display = 'none';
    });