नमस्कार दोस्तो! स्वागत है आपका Technology Tips Abhishek ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है Image to Web P Converter Tool Script for Blogger | Create Image to Web P Tool in Blogger के बारे में। and ये Blogger Me JPEG to Web P Tool Website Kaise Banaye? तो इन सभी बातों को हम इस Article में जानेंगे। तो बने रहिये इस Article में और जानिए पूरे Details में।
आजकल के समय में Image की एक से बढ़कर एक Quality और Image Formats मौजूद है| और ऐसे में अब तक Internet पर सबसे ज्यादा Popular Image Format JPEG और PNG है| लेकिन अब लोग सबसे ज्यादा वेबसाइट और ब्लॉग के लिए Web P Image Format का इस्तेमाल करने लगे है|
क्योकि मैं आपको बता दूँ की JPEG और PNG फॉर्मेट की साइज़ कुछ ज्यादा होती है| लेकिन वही Web P Image Format की बात की जाये तो इस फॉर्मेट में इमेज की साइज़ बहुत ही कम होती है| लेकिन image quality में कोई फर्क नही पड़ता है| तो ऐसे में कम साइज़ और अच्छी इमेज क्वालिटी के कारण अब WebP Image Format काफी लोकप्रिय है| आप किसी भी JPEG Image to Web P Converter Tool का इस्तेमाल करके आसानी से इमेज को Web P में बदल सकते है|
Image to Web P Converter Tool Script for Blogger
So दोस्तों अगर आप खुद की Image to Web P Generator बनाना चाहते है| तो यह बिलकुल ही संभव है| इसके लिए बस आपको Image to Web P Tool Script for Blogger की जरूरत पड़ने वाली है| और साथ ही इसके मदद से आसानी से Blogger में ही इस टूल को बना सकते है| तो निचे मैंने आपको इस टूल को ब्लॉगर म बनाने के सभी स्टेप्स उपलब्ध करवाया है|
इन्हें जरुर पढ़े-
Create YouTube Video Downloader Tool in blogger
Create Keywords Generator Tool in Blogger
YouTube Thumbnail Downloader Script for Blogger
Create a Voice to Text Generator Tool in Blogger
Percentage Calculator Script for Blogger
Create internet Speed Test Tool in Blogger
Word Counter Script for Blogger
Create Image to Web P 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 close up 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 prepared to Use.
निष्कर्ष –
आपको यह Image to Web P Converter Tool Script for Blogger | Create Image to Web P Tool in Blogger का आर्टिकल कैसा लगा। आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं। या किसी प्रकार का Suggestion देना भी चाहते है तो आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।
