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.


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

<body >
<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>
<form name="gen">
<table class="auto-style30" style="width: 500px">
<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" />
<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" />
<td><input type="file" id="fileElem" name="fileElem[]" accept="image/jpeg" onchange="OnFileSelect()" style="visibility:hidden"></td>
<td><img id="image1" src="../Bilder/Andie MacDowell.jpg" title="flower.jpg"></td>

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.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); }


Kontakt    Datenschutz   Impressum