diedVIPs

html knowhow

Konverter JPG to GIF









Konverter JPG to GIF
So sieht´s aus

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

Quellcode
<html>
<head>

<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 GIF-Bild zu speichern.</li>
</ol>
<form name="gen">
<table class="auto-style30" style="width: 500px">
<tr>
<td>
<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 GIF" onClick="Save()">
<img src="https://www.rapidtables.com/lib/icons/Toolbar Icons/32/floppy_35inch_blue.png" alt="save" />
</button></td>
</tr>
<tr>
<td><input type="file" id="fileElem" name="fileElem[]" accept="image/jpeg" onchange="OnFileSelect()" style="visibility:hidden"></td>
</tr>
<tr>
<td><img id="image1" src="../Bilder/Andie MacDowell.jpg" title="flower.jpg"></td>
</tr>
</table>
</form>

<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)+".gif";
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>
</body>

</html>








Kontakt    Datenschutz   Impressum