Images convert into webp drag and drop

Here is an example of how you can convert a JPG, PNG, GIF, or ICO image to the WEBP format using JavaScript and the canvas element:

// Select the file input element

const fileInput = document.querySelector('#fileInput');

// Select the convert button

const convertButton = document.querySelector('#convertButton');

// Select the download link element

const downloadLink = document.querySelector('#downloadLink');

// Add an event listener to the convert button

convertButton.addEventListener('click', () => {

  // Get the file from the file input element

  const file = fileInput.files[0];

  // Create a new FileReader

  const reader = new FileReader();

  // Add an event listener for when the file has finished loading

  reader.addEventListener('load', () => {

    // Get the data URL of the file

    const dataURL = reader.result;

    // Create an image element

    const image = new Image();

    // Set the src of the image to the data URL

    image.src = dataURL;

    // Add an event listener for when the image has finished loading

    image.addEventListener('load', () => {

      // Get the canvas element

      const canvas = document.querySelector('#canvas');

      // Set the width and height of the canvas to the width and height of the image

      canvas.width = image.width;

      canvas.height = image.height;

      // Get the context of the canvas

      const ctx = canvas.getContext('2d');

      // Draw the image on the canvas

      ctx.drawImage(image, 0, 0);

      // Get the data URL of the canvas

      const convertedDataURL = canvas.toDataURL('image/webp');

      // Set the href of the download link to the converted data URL

      downloadLink.href = convertedDataURL;

      // Enable the download link

      downloadLink.removeAttribute('disabled');

    });

  });

  // Read the file as a data URL

  reader.readAsDataURL(file);

});

This code assumes that you have an HTML page with the following elements:

<input type="file" id="fileInput" /> <button id="convertButton">Convert to WEBP</button> <a id="downloadLink" disabled>Download WEBP</a> <canvas id="canvas"></canvas>

To convert multiple images at once, you can modify the code to loop through an array of files and convert them one by one. You could also use a file drop area or drag and drop functionality to allow the user to select and convert multiple images at once.