Skip to main content

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. 


Comments

Popular posts from this blog

C++ Programming Tutorial - How to Install Code::Blocks in Ubuntu Linux - Learn Online

Installing Code::Blocks How do I Install Code::Blocks HOWTO: Installing Code::Blocks 10.05 How do you install Irrlicht on Code::Blocks? How do you install CodeBlock on ubuntu? codeblocks /bin/sh: g++: not found Installing codeblocks on ubuntu Installing Code::Blocks on Ubuntu 10.04?

Google Fight Against Low Quality and Spammy Content

  Google's ongoing battle against spammy and low-quality content in search results is an essential aspect of maintaining the platform's credibility and usefulness. Here are some of the new strategies and policies Google is implementing to combat these issues: Improved Quality Ranking : Google is enhancing its core ranking algorithms to prioritize high-quality and original content while reducing the visibility of unoriginal or spammy content in search results. New Spam Policies : Google is updating its spam policies to address emerging tactics used by spammers. This includes targeting practices such as expired websites repurposed as spam repositories, obituary spam, and other manipulative behaviors. Reducing Unoriginal Results : Google is refining its ranking systems to identify and minimize unhelpful, unoriginal content. This includes pages created specifically to match certain search queries and content that prioritizes search engine optimization over user experience. Scaled C

Contextual Design and Development is the Driving Force Behind all Successful Mobile Applications

The time of ordinary custom web application design & development is long gone. Today the focus is on contextual design and development. It is the rise in the popularity of mobile applications that has provided the impetus for giving importance to ‘context’ when it comes to app or web development. Let’s focus our attention on mobile applications and why mobile applications need to be developed keeping the context in mind. Because they are used in diverse locations Let’s face it. We all love mobile apps because they can be used just about anywhere and at any given point of time. Yes, that’s right, they can be used in offices, on a train, in the kitchen, movie theatre and the list just goes on. So, the app needs to be developed in context of the location. Different users have different needs when it comes to a mobile app and these needs, in part, are determined by their location. For e.g. if a developer thinks a particular app that is in the process of being developed will onl