Image to WebP Converter Tool Script for Blogger
Hello friends! Welcome to your modernsite4u blog. So in this article today we are going to talk Image to WebP Converter Tool Script for Blogger | Create Image to WebP Tool in Blogger. And this Blogger Me JPEG to WebP Tool Website Kaise Banaye? So we will know all these things in this article. So stay in this article and know more in full details.
Convert Image to Webp Format
In today's time, more than one Quality and Image Formats exist. And thus far the most popular image format on the Internet is JPEG and PNG. But now people have started using WebP Image Format for most websites and blogs.
Because let me tell you that the size of JPEG and PNG formats is much more. But if we talk about the same WebP Image Format, then the image size in this format is very less. But image quality does not matter. So, due to low size and good image quality, now WebP Image Format is very popular. You can easily convert the image to WebP using any JPEG Image to WebP Converter Tool.
Image to WebP Converter Tool Script for Blogger
So friends if you want to create your own Image to WebP Generator Tool Website. So it is absolutely possible. All you need to do for this is Image to WebP Tool Script for Blogger. And also with the help of this you can easily make this tool in Blogger itself. So below I have provided you all the steps to make this tool in 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
Conclusion - You will get this Image to WebP Converter Tool Script for Blogger | How was the article about Create Image to WebP Tool in Blogger. You must definitely comment by commenting in the comment box below. Or you also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below.
0 Comments