JPG to PNG Convertor Using HTML CSS & JavaScript Project

Using HTML CSS & JavaScript Project

HTML Code:

                <!DOCTYPE html>
<html>
<head>
<title>JPG to PNG Converter</title>

</head>
<body>
<h1>JPG to PNG Converter</h1>
<form>
<input type="file" id="imageInput" accept=".jpg">
<button type="button" onclick="convertToPNG()">Convert</button>
</form>
<img id="preview" src="#" alt="Converted PNG Image" style="display:none;">
<script src="script.js"></script>
</body>
</html>

CSS Code:

                <style>
                    #preview {
                    max-width: 100%;
                    height: auto;
                    margin-top: 10px;
                    }
                    </style>

JavaScript Code:

                function convertToPNG() {
                    var input = document.getElementById('imageInput');
                    if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                    var image = new Image();
                    image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    var pngDataUrl = canvas.toDataURL('image/png');
                    document.getElementById('preview').src = pngDataUrl;
                    document.getElementById('preview').style.display = 'block';
                    };
                    image.src = e.target.result;
                    };
                    reader.readAsDataURL(input.files[0]);
                    }
                    }

JPG to PNG Convertor Using HTML CSS & JavaScript Project

JPG to PNG Convertor Using HTML CSS & JavaScript Project

4 Comments

JPG to PNG Convertor Using HTML CSS & JavaScript Project

Categories

Main Tags

Latest Posts

Popular Posts

JPG to PNG Convertor Using HTML CSS & JavaScript Project

How to delete permanently Facebook account in just 1 minutes

Contact Form