Image To PNG
January 28, 2023
Image To PNG
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yfu8Gbvupol44PCxcpMHpvG13m2ACMuHd9IwSLKNyTLGUWOjuRt-Y4bsD8wOOuAnxHRihMv0ejHTs96Gua9bZTx3TQEWeKMK5mqiDM0KLJT7nFp5pMZZtYjMyj-NF48XdYMs0V5idnhGBONuCYbVfb6RpeO33KYtpbCKp441QkP8YOq7OvgKqk2a/s3264/toolme%20logo%20.webp">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Free Image To PNG Converter</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="description" content="With the help of this tool, you can convert any image to webp for free...">
<meta name="keywords" content="image to PNG,">
<meta name="language" content="English">
<style>
body {
margin-left: 110px;
margin-right: 110px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
background-color: lightskyblue;
text-align: center;
}
@media only screen and (max-width: 600px) {
body {
margin-left: 10px;
margin-right: 12px;
}
}
/*--------------------- banner style stat--------------------------*/
@keyframes fade{
from{
opacity:0.4;
}
to{
opacity:1;
}
}
#slider{
margin:0 auto;
width:100%;
overflow:hidden;
}
.slides{
overflow:hidden;
animation-name:fade;
animation-duration:1s;
display:none;
}
img{
width:99%;
border-radius: 7px;
}
#dot{
margin:0 auto;
text-align:center;
}
.dot{
display:inline-block;
border-radius:50%;
background:#d3d3d3;
padding:8px;
margin:10px 5px;
}
.active{
background: rgb(255, 81, 0);
}
@media (max-width:567px){
#slider{
width:100%;
}
}
#heading{
display:block;
text-align:center;
font-size:2em;
margin:10px 0px;
}
/*------------------------banner style end---------------------------------------*/
/*uplod*/
.drag-area{
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
background-color: white;
height: 300px;
width: 100%;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.drag-area.active{
border: 2px solid rgb(229, 255, 0);
}
.drag-area .icon{
font-size: 100px;
color: rgb(255, 81, 0);
}
.drag-area .icon:hover{
color: rgb(8, 187, 8);
}
.drag-area p{
font-size: 25px;
font-weight: 500;
color: black;
margin: 10px 0 15px 0;
}
.drag-area span{
font-size: 16px;
font-weight: 500;
color: black;
margin: 10px 0 15px 0;
}
.drag-area button{
padding: 10px 25px;
font-size: 20px;
font-weight: 500;
border: none;
outline: none;
background: rgb(255, 81, 0);
color: #f1f1f1;
border-radius: 5px;
cursor: pointer;
}
.drag-area button:hover{
background-color: rgb(8, 187, 8);
}
.drag-area img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 5px;
}
/*uplod*/
#previews > div {
box-sizing: border-box;
height: auto;
width: 240px;
padding: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: top;
}
#previews > div > progress {
width: 80%;
}
/*footer css*/
.footer{
padding: 40px 0;
background-color: black;
border-radius: 7px;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: rgb(255, 81, 0);
}
.footer .social a{
font-size: 35px;
color: rgb(255, 81, 0);
border: none;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
margin: 0 8px;
}
.footer .social a:hover{
color: white;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 20px;
line-height: 1.7;
margin-bottom: 0;
text-align: center;
}
.footer ul a{
text-decoration: none;
color: white;
}
.footer ul li{
display:inline-block;
padding: 0 15px;
}
.footer ul a:hover{
color: rgb(255, 81, 0);
}
.copyright{
color: rgba(255, 255, 255, 0.658);
text-align: center;
font-size: 17px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 95%;
height: auto;
border-radius: 7px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*footer css end*/
.home-bt{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-bt a{
position: relative;
background-color: rgb(255, 81, 0);
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
font-weight: 400;
padding: 10px 30px;
border-radius: 7px;
transition: 0.5s;
}
.home-bt a:hover{
letter-spacing: 0.25em;
background-color: rgb(27, 255, 6);
box-shadow: 0 0 35px rgb(27, 255, 6);
}
.content-box{
background-color: white;
border-radius: 7px;
padding: 20px;
text-align: left;
}
</style>
</head>
<body>
<!----------------------banner hear------------------------------>
<div class="slides">
<a href="https://image-editor.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TYbyHh8tDTr0lEcmXbR3drWxlYJnoRkHRbqJ_Q3ToAdhhdjxfnBL7YC6GLEyb25HFekghTBk2xdiCOeXQathsdkNY1iyWFJc_9BkhEbFv1aZkHWmBcixl49FTNd1rul39Sjegn5xtCzwT-eN31cDYywR-p_eSHuFkfO0bDDpKEAuo3jLFYj-qc4K/s3264/image%20editor%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://qrcode.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1S95bobqW4BOa5PxrVdXvtQy5T-bfHHiLtmdqRY1qYkn9Dlepy2Ht_aaj-Mhbu-VPWhxsjUWiYxh9jcYtE9VZ07VatipYXPHtbmYK3jYWFadbvfDlNdPrPK9TAC8AI7nYYC-FQvqP-SQZdmf67estSkLvFr6xQDIwcdGGV_1hu7iVlwwhZdLYbtz/s3264/QR%20code%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://text-number.toolme.xyz/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jt4nh-TGj-fSGv2zrRsSGHMG2QB7443WwkcUil5TaA0iw99FjjpKU5f9As42h0XQeB61Lo6ojbuQDGMcKRJ7wLdNRAqVF7PHuTy_UHuyfakQ5eI4ZsCbctfOXZC8t756aJVPQs-H4I-nshuAoCFnO8DvHG7E_3WtTahTQbLjkvyf3aFnr3IV6nVK/s3264/text%20to%20imoji%20.png.webp" width="100%"/></a>
</div>
<div id="dot">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!----------------------banner end hear------------------------------>
<br/>
<div class="home-bt">
<a href="https://toolme.xyz"><span><i class="fas fa-home"></i> Home</span></a>
</div>
<br/>
<div class="layout">
<div class="up-img">
<label class="btn btn-outline-info btn-lg">
<div class="drag-area">
<div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
<p>Image to PNG</p>
<button>
<label>
Choose Image
<input
type="file" multiple accept="image/*"
hidden
class="form-control-file"
(change)="fileChanged($event)"
/>
<i class="fa-solid fa-images"></i>
</label>
</button>
<span>Click on image to download</span>
</div>
<div id="previews"></div>
<br/>
<div class="content-box">
<h2 style="text-align: left;"><span style="color: red;">How to use this tool</span></h2>
<p>By clicking on choose image, you can convert any image to PNG in few seconds.</p>
<p>With the help of this tool, you can convert any image to PNG which is absolutely free and yes you have to click on the image to download the image and your PNG image will be downloaded, then use this tool.</p>
<h3 style="text-align: left;"><span style="color: red;">What does PG mean?</span></h3>
<p>When a single image file is saved in Portable Network Graphic (PNG), this process is called a PNG file. PNG files also have the same lossless compression techniques as GIF files. And it is mainly used to store graphical web images.</p>
<p>Apart from this, PNG images are transparent, so it is mostly used in background places, which does not have the benefit of background hide. Rather, most icons are in PNG format and their size is also less than other image formats.</p>
</div>
<!-----footer bar---------->
<br/>
<section class="footer">
<div class="social">
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-facebook"></i></a>
<a href=""><i class="fab fa-snapchat"></i></a>
<a href=""><i class="fab fa-youtube"></i></a>
</div>
<ul class="list">
<li>
<a class="myBtn_multi">About Us</a>
</li>
<li>
<a class="myBtn_multi">Contect Us</a>
</li>
<li>
<a class="myBtn_multi">Privacy Policy</a>
</li>
</ul>
<!-- about us hear---->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..1</p>
</div>
</div>
<!------ contat us hear----- -->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..2</p>
</div>
</div>
<!------ privacy policy hear ------->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..3</p>
</div>
</div>
<p class="copyright">
copyright by shamshad
</p>
</section>
<!-----footer bar end------->
<script>
// banner js
var index = 0;
var slides = document.querySelectorAll(".slides");
var dot = document.querySelectorAll(".dot");
function changeSlide(){
if(index<0){
index = slides.length-1;
}
if(index>slides.length-1){
index = 0;
}
for(let i=0;i<slides.length;i++){
slides[i].style.display = "none";
dot[i].classList.remove("active");
}
slides[index].style.display= "block";
dot[index].classList.add("active");
index++;
setTimeout(changeSlide,4000);
}
changeSlide();
// banner js end
let refs={};function addImageBox(e){let t=document.createElement("div"),n=document.createElement("progress");return t.appendChild(n),e.appendChild(t),t}function processFile(e){if(!e)return;console.log(e);let t=addImageBox(refs.imagePreviews);new Promise(function(t,n){let r=new Image;r.addEventListener("load",function(){t(r)}),r.src=URL.createObjectURL(e)}).then(function(e){return new Promise(function(t,n){let r=document.createElement("canvas"),o=r.getContext("2d");r.width=e.width,r.height=e.height,o.drawImage(e,0,0),r.toBlob(function(e){t(URL.createObjectURL(e))},"image/png")})}).then(function(e){return new Promise(function(t,n){let r=new Image;r.addEventListener("load",function(){t({imageURL:e,scaledImg:r})}),r.setAttribute("src",e)})}).then(function(n){let r=document.createElement("a"),o=`${e.name}`.split(".").shift();r.setAttribute("href",n.imageURL),r.setAttribute("download",o+".png"),r.appendChild(n.scaledImg),t.innerHTML="",t.appendChild(r)})}function processFiles(e){for(let t of e)processFile(t)}function fileSelectorChanged(){processFiles(refs.fileSelector.files),refs.fileSelector.value=""}function dragenter(e){e.stopPropagation(),e.preventDefault()}function dragover(e){e.stopPropagation(),e.preventDefault()}function drop(e,t){t.stopPropagation(),t.preventDefault(),e(t.dataTransfer.files)}function setDragDrop(e,t){e.addEventListener("dragenter",dragenter,!1),e.addEventListener("dragover",dragover,!1),e.addEventListener("drop",function(e){drop(t,e)},!1)}refs.imagePreviews=document.querySelector("#previews"),refs.fileSelector=document.querySelector("input[type=file]"),refs.fileSelector.addEventListener("change",fileSelectorChanged),setDragDrop(document.documentElement,processFiles);
</script>
</body>
</html>
0 blogger-facebook