diedVIPs

html knowhow

Konverter JPG to PNG









Konverter JPG to PNG
So sieht´s aus

  1. Drücke Laden, um das JPG-Bild zu laden.
  2. Drücke Speichern, um das konvertierte PNG-Bild zu speichern.

Quellcode
<html>
<head>
<script async src='https://www.rapidtables.com/cdn-cgi/challenge-platform/h/g/scripts/invisible.js?ts=1655625600'></script>

<style type="text/css">
.calc { width:350px; padding:15px; }
@media all and (max-width: 576px) { .calc { width:100%; padding:8px; } }
</style>
</head>

<body >
<ol>
<li>Drücke <em>Laden</em>, um das JPG-Bild zu laden.</li>
<li>Drücke <em>Speichern</em>, um das konvertierte PNG-Bild zu speichern.</li>
</ol>

<form name="gen">
<table class="auto-style29" style="width: 500px">
<tr>
<td class="auto-style18">
<button type="button" name="B1" title="Open JPG image" onClick="Open()">
<img src="https://www.rapidtables.com/lib/icons/Toolbar Icons/32/directory_open.png" alt="open" />
</button>
<img alt="" height="2" src="../Bilder/space.gif" width="50">
<button type="button" name="B2" title="Save as PNG" onClick="Save()">
<img src="https://www.rapidtables.com/lib/icons/Toolbar Icons/32/floppy_35inch_blue.png" alt="save" />
</button></td>
</tr>


<center>
<tr>
<td><input type="file" id="fileElem" name="fileElem[]" accept="image/jpeg" onchange="OnFileSelect()" style="visibility:hidden"></td>
</tr>
<tr>
<td class="auto-style18"><img id="image1" src="../Bilder/Andie MacDowell.jpg" title="Andy"></td>
</tr>
</table>
</form>

<center>

<script src="https://www.rapidtables.com/lib/utils/utils.js"></script>
<script src="https://www.rapidtables.com/lib/Blob.js-master/Blob.js"></script>
<script src="https://www.rapidtables.com/lib/canvas-toBlob.js-master/canvas-toBlob.js"></script>
<script src="https://www.rapidtables.com/lib/FileSaver.js-master/FileSaver.js"></script>

<script>
var img,width,height;

window.onload = function()
{
img = document.getElementById("image1");
width = img.width;
height = img.height;
};
function Open()
{
var fileElem = document.getElementById("fileElem");
fileElem.focus();
fileElem.click();
}
function Save()
{
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img, 0, 0);

var name = GetFileName(img.title)+".png";
canvas.toBlob(function(blob) {
saveAs(blob, name);
});
}
function OnFileSelect(event)
{
var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
img.title = fileElem.name;
reader.onload = function(event) {
img.src = event.target.result;
img.onload = function(event) {
width = img.width;
height = img.height;
if( img.width>200 )
img.width=200;
};
};
reader.readAsDataURL(fileElem);
}
</script><br/>
<script src="https://www.rapidtables.com/lib/utils/utils.js"></script>
<script src="https://www.rapidtables.com/lib/Blob.js-master/Blob.js"></script>
<script src="https://www.rapidtables.com/lib/canvas-toBlob.js-master/canvas-toBlob.js"></script>
<script src="https://www.rapidtables.com/lib/FileSaver.js-master/FileSaver.js"></script>
</body>

</html>








Kontakt    Datenschutz   Impressum