Image to WebP Converter Tool Script for Blogger

Photo of author
Rohit Baidya

नमस्कार दोस्तो! स्वागत है आपका Techly360 ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है Image to WebP Converter Tool Script for Blogger | Create Image to WebP Tool in Blogger के बारे में। and ये Blogger Me JPEG to WebP Tool Website Kaise Banaye? तो इन सभी बातों को हम इस Article में जानेंगे। तो बने रहिये इस Article में और जानिए पूरे Details में।

Convert Image to Webp Format

JPEG Image to WebP Converter Tool Script for Blogger

आजकल के समय में Image की एक से बढ़कर एक Quality और Image Formats मौजूद है| और ऐसे में अब तक Internet पर सबसे ज्यादा Popular Image Format JPEG और PNG है| लेकिन अब लोग सबसे ज्यादा वेबसाइट और ब्लॉग के लिए WebP Image Format का इस्तेमाल करने लगे है|

क्योकि मैं आपको बता दूँ की JPEG और PNG फॉर्मेट की साइज़ कुछ ज्यादा होती है| लेकिन वही WebP Image Format की बात की जाये तो इस फॉर्मेट में इमेज की साइज़ बहुत ही कम होती है| लेकिन image quality में कोई फर्क नही पड़ता है| तो ऐसे में कम साइज़ और अच्छी इमेज क्वालिटी के कारण अब WebP Image Format काफी लोकप्रिय है| आप किसी भी JPEG Image to WebP Converter Tool का इस्तेमाल करके आसानी से इमेज को WebP में बदल सकते है|

Image to WebP Converter Tool Script for Blogger

So दोस्तों अगर आप खुद की Image to WebP Generator Tool Website बनाना चाहते है| तो यह बिलकुल ही संभव है| इसके लिए बस आपको Image to WebP Tool Script for Blogger की जरूरत पड़ने वाली है| और साथ ही इसके मदद से आसानी से Blogger में ही इस टूल को बना सकते है| तो निचे मैंने आपको इस टूल को ब्लॉगर म बनाने के सभी स्टेप्स उपलब्ध करवाया है|

इन्हें जरुर पढ़े-

Create Image to WebP Converter Tool in Blogger

  • Go to Blogger/Blogspot Dashboard
  • Now Click on Theme Section
  • Scroll Down & Click & Apply Simple Blog Template
  • Now Click On Customize Arrow & Click On Switch to First Generation Theme
  • Now Click On Switch Without a Backup & Now Turn off Navbar
  • Click On Edit HTML & Copy Code Bellow

<!DOCTYPE html>
<html>
<title>Convert Image to Webp Format</title>
<head>
    <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://techly360.com/image-to-webp-converter-tool-script-for-blogger/' 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="icon" href="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 right, #2d75e1, #00a3ff, #00c6da, #00df87, #a8eb12);">
<div class="container">
  <div class="layout">
  <h1>Convert Image to Webp Format</h1>
  <div>
  <div class="ads container">  
         Place Your Ad Code     
            </div> 
    <input type="file" multiple accept="image/*">
  </div>
  <div id="previews"></div>
  <div class="dropTarget"></div>
</div>
</div>
 </div>
<br>

</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>

  • Remove all Code & Paste New Code Here
  • Now Click on Save Theme, That’s All
  • Now Your Image to WebP Converter Tool is Ready to Use

निष्कर्ष – आपको यह Image to WebP Converter Tool Script for Blogger | Create Image to WebP Tool in Blogger का आर्टिकल कैसा लगा। आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं। या किसी प्रकार का Suggestion देना भी चाहते है तो आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।

Comments are closed.