Javascript Drag and Drop Convert (PNG+JPG) Images to Webp Format on Client Side Full Project For Beginners

Javascript Drag and Drop Convert (PNG+JPG) Images to Webp Format on Client Side Full Project For Beginners


Welcome folks today in this blog post we will be converting png and jpg images to webp format using drag and drop in javascript. All the full source code of the application is shown below.



Get Started



In order to get started you need to make an index.html file and copy paste the following code




<html lang="en">
 <meta charset="UTF-8">
 <title>Javascript Convert Images to Webp Format</title>
 <link rel="stylesheet" href="style.css"/>
    <div class="layout">
        <h1>Convert image to webp format</h1>
          <input type="file" multiple accept="image/*">
        <div id="previews"></div>
        <div class="dropTarget"></div>
 <script src="script.js"></script>



Now create a style.css file and copy paste the following code




body {
    padding: 20px;
    font-family: sans-serif;
  h1 {
    margin-top: 0;
  input[type=file] {
    margin: 20px 0;
  img {
    max-height: 100%;
    max-width: 100%;
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
  .dropTarget {
    position: relative;
    border: 3px dashed silver;
    flex-basis: auto;
    flex-grow: 20;
  .dropTarget::before {
    content: 'Drop files here';
    color: silver;
    font-size: 5vh;
    height: 5vh;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    pointer-events: none;
    user-select: none;
  #previews > div {
    box-sizing: border-box;
    height: 240px;
    width: 240px;
    padding: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
  #previews > div > progress {
    width: 80%;
  .layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    height: calc(100vh - 40px);


See also  How to Validate Aadhaar Card Number Using Regular Expression in Javascript Full Project For Beginners


And now make a script.js file and copy paste the following code




let refs = {};
refs.imagePreviews = document.querySelector('#previews');
refs.fileSelector = document.querySelector('input[type=file]');

function addImageBox(container) {
  let imageBox = document.createElement("div");
  let progressBox = document.createElement("progress");
  return imageBox;

function processFile(file) {
  if (!file) {

  let imageBox = addImageBox(refs.imagePreviews);

  // Load the data into an image
  new Promise(function (resolve, reject) {
    let rawImage = new Image();

    rawImage.addEventListener("load", function () {

    rawImage.src = URL.createObjectURL(file);
  .then(function (rawImage) {
    // Convert image to webp ObjectURL via a canvas blob
    return new Promise(function (resolve, reject) {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext("2d");

      canvas.width = rawImage.width;
      canvas.height = rawImage.height;
      ctx.drawImage(rawImage, 0, 0);

      canvas.toBlob(function (blob) {
      }, "image/webp");
  .then(function (imageURL) {
    // Load image for display on the page
    return new Promise(function (resolve, reject) {
      let scaledImg = new Image();

      scaledImg.addEventListener("load", function () {
        resolve({imageURL, scaledImg});

      scaledImg.setAttribute("src", imageURL);
  .then(function (data) {
    // Inject into the DOM
    let imageLink = document.createElement("a");

    imageLink.setAttribute("href", data.imageURL);
    imageLink.setAttribute('download', `${}.webp`);

    imageBox.innerHTML = "";

function processFiles(files) {
  for (let file of files) {

function fileSelectorChanged() {
  refs.fileSelector.value = "";

refs.fileSelector.addEventListener("change", fileSelectorChanged);

// Set up Drag and Drop
function dragenter(e) {

function dragover(e) {

function drop(callback, e) {

function setDragDrop(area, callback) {
  area.addEventListener("dragenter", dragenter, false);
  area.addEventListener("dragover", dragover, false);
  area.addEventListener("drop", function (e) { drop(callback, e); }, false);
setDragDrop(document.documentElement, processFiles);


See also  Build a Infinite Scroll Image Gallery App Using Unsplash API Using HTML5 CSS3 and Javascript Full Project For Beginners


And now if you open index.html file you will see the below screenshot


Leave a Reply