Auto Convert Image to Webp Script | Create Image to Webp Converter Website

In this post I will teach you how can you create your own Any Image Type into Webp format without losing Image Quality.
Watch Live Demo
How to Create:
1. Go to Blogger.com
2. Create a new Website there.
3. After that go to theme section and choose 'Ethereal' Theme.
4. Click on ' Edit Html'
5. Copy the Whole Script from below and paste there.
<!DOCTYPE html>
<html>
  <!-- Made by:- HackerThyLord -->
    <!-- You Tube Channel:- Hacker Thy Lord-->
      <!-- You Tube Channel Link:- youtube.com/channel/ -->
      <title>Convert Image to Webp Format</title>
      <head>
           <!-- ****** Fully Customize By HackerThyLord ********* -->
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               	<meta name="description" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp"/>
               		<meta name="robots" content="index,follow" />
               			<meta name="keywords" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp" />
               			     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
               			     	 <link href='https://imageconverterwebp-image.blogspot.com/' rel='canonical'/>
               			     	 	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
               			     	 	   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               			     	 	     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
               			     	 	       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
               			     	 	         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
               			     	 	         <link rel="icon" href="https://spemer.com/img/works/favicon/favicon.png" sizes="16x16" type="image/png">
               			     	 	           <style>
  body {
    width: 700px;
      margin: 0 auto;
        padding: 20px;
          font-family: sans-serif;
          }
          h1 {
            margin-top: 0;
            }
            input[type=file] {
              margin: 20px 0;
                margin-left: 200px;
                }
                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);
                                                                                        margin: 2% auto;
                                                                                          padding: 15px;
                                                                                            background-color: #FFFFFF;
                                                                                              -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
                                                                                              -  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
                                                                                              -  }
                                                                                              -  .ads {  
                                                                                              -     margin: auto;
                                                                                              -        padding: 60px 0; 
                                                                                              -           max-width: 640px;   
                                                                                              -              box-shadow: 0 5px 15px rgba(0,0,0,.16);  
                                                                                              -                 border-radius: 5px;  
                                                                                              -                    margin-top: 1em;  
                                                                                              -                       background: #fff;  
                                                                                              -                          text-align: left;  
                                                                                              -                           }
                                                                                              -                             </style>
                                                                                              -                             </head>
                                                                                              -                             <body style="background-image:linear-gradient(to top left, #ffff00 0%, #ff33cc 100%);">
                                                                                              -                               <nav class="navbar navbar-default">
                                                                                              -                                   <!-- Button to Open the Privacy Page Modal -->
                                                                                              -                                   <div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#privacy-page">
                                                                                              -                                    Our Service
                                                                                              -                                    </button></div>
    <!-- Button to Open the Contact Page Modal -->
    <div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#Contact-Us">
      Contact Us
      </button></div>
    <div><button type="button" class="btn btn-primary" style="float:right; margin:4px" data-toggle="modal" data-target="#about-page">
      About Us
        </button></div>
  </div>
  </nav>
<style id='page-skin-1' type='text/css'>

button {
  background-color: #4CAF50; /* Green */
    border: none;
      color: white;
        padding: 12px 28px;
          text-align: center;
            text-decoration: none;
              display: inline-block;
                font-size: 16px;
                }
</style>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <!-- *********** HackerThyLord ********** -->
<!-- About page Modal -->
  <!-- ****** FUlly Customize By HackerThyLord ********* -->
  <!-- The Modal -->
  <div class="modal" id="about-page">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
      <!-- Modal Header -->
            <div class="modal-header">
                    <h4 class="modal-title">About Page</h4>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                                  </div>
      <!-- Modal body -->
            <div class="modal-body">
About

      </div>
      <!-- Modal footer -->
            <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                          </div>
    </div>
      </div>
      </div>
      <!-- End About page Modal -->
<!-- Contact Modal -->
<!-- The Modal -->
<div class="modal" id="Contact-Us">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <!-- Modal Header -->
            <div class="modal-header">
                    <h4 class="modal-title">Contact Us</h4>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                                  </div>
      <!-- Modal body -->
            <div class="modal-body">
                   <!-- Owner-: HackerThyLord -->
	   Contact
      </div>
      <!-- Modal footer -->
            <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                          </div>
    </div>
      </div>
      </div>
      <!-- End privacy page Modal -->
<!-- privacy page Modal -->
<!-- The Modal -->
<div class="modal" id="privacy-page">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <!-- Modal Header -->
            <div class="modal-header">
                    <h4 class="modal-title">Our Service</h4>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                                  </div>
      <!-- Modal body -->
            <div class="modal-body">
		Our Service
      </div>
      <!-- Modal footer -->
            <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                          </div>
    </div>
      </div>
      </div>
      <!-- End privacy page Modal -->
      <div class="container">
        <div class="layout">
          <h1>Free Image Converter Tool From Any Format To Webp Format</h1>
              <p>By Using This Free Tool Your Image Size Will Compress And You Will Not Lose Image Quality</p>
                <div>
                  <div class="ads container">  
                      <!-- Adsense code here -->
                                       Copyright © 2021 - 2022 All Right Reserved | Powered by <a herf='https://hackerthylord.blogspot.com/'>HackerThyLord</a>   
                                           </div> 
                                               <input type="file" multiple accept="image/*">
                                                 </div>
                                                   <div id="previews"></div>
                                                     <div class="dropTarget"></div>
                                                     </div>
                                                     </div>
                                                      </div>
                                                      <br>
                                                      <!-- ****** FUlly Customize By HackerThyLord ********* -->
                                                      </body>
                                                      <script>
                                                      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");
      imageBox.appendChild(progressBox);
        container.appendChild(imageBox);
  return imageBox;
  }
function processFile(file) {
  if (!file) {
      return;
        }
          console.log(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 () {
          resolve(rawImage);
              });
    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) {
              resolve(URL.createObjectURL(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', `${file.name}.webp`);
            imageLink.appendChild(data.scaledImg);
    imageBox.innerHTML = "";
        imageBox.appendChild(imageLink);
          });
          }
function processFiles(files) {
  for (let file of files) {
      processFile(file);
        }
        }
function fileSelectorChanged() {
  processFiles(refs.fileSelector.files);
    refs.fileSelector.value = "";
    }
refs.fileSelector.addEventListener("change", fileSelectorChanged);

// Set up Drag and Drop
function dragenter(e) {
  e.stopPropagation();
    e.preventDefault();
    }
function dragover(e) {
  e.stopPropagation();
    e.preventDefault();
    }
function drop(callback, e) {
  e.stopPropagation();
    e.preventDefault();
      callback(e.dataTransfer.files);
      }
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);
      </script>
  </html>
6. Click on save and your Image to Webp Converter Website is ready.
Updates

Hacker Thy Lord

Auto Convert Image to Webp Script | Create Image to Webp Converter Website

Post a Comment

0 Comments

Play and Win

Search This Blog

Follow Us

Buy Now

Subscribe Us

Contact Us

Contact Us

Earn Money Online | Free Zcash (ZEC) Earning Sites | 1 ZEC $61 | Daily Claim |

IDM Crack: Crack full version with Chrome Extension

WinRAR 6.02 Crack 2021 License Key Latest Full Version Free Download [32/64-bit]

HackerThyLord

How to Generate Responsive Contact Us Page for Blogger without any coding (2022 update)

Menu Footer Widget

Updates

Hacker Thy Lord

Auto Convert Image to Webp Script | Create Image to Webp Converter Website

You may like these posts

Post a Comment

0 Comments

Play and Win

Search This Blog

Follow Us

Buy Now

Social Plugin

Subscribe Us

Contact Us

Contact Us

Earn Money Online | Free Zcash (ZEC) Earning Sites | 1 ZEC $61 | Daily Claim |

IDM Crack: Crack full version with Chrome Extension

WinRAR 6.02 Crack 2021 License Key Latest Full Version Free Download [32/64-bit]

HackerThyLord

How to Generate Responsive Contact Us Page for Blogger without any coding (2022 update)

Menu Footer Widget
