diedVIPs

html knowhow

Konverter Bild zu schwarz/weiss









Konverter Bild zu schwarz/weiss
So sieht´s aus

  1. Drücke Laden, um das JPG-Bild zu laden.
  2. Drücke Speichern, um das konvertierte schwarz/weiss zu speichern.
Original image:
Converted image:
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">
.grayscale {filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url('grayscale.svg#greyscale'); filter: gray; -webkit-filter: grayscale(1);}
.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 schwarz/weiss zu speichern.</li>
</ol>

<form name="gen">
<table class="auto-style29" style="width: 400px">
<tr>
<td colspan="1" class="auto-style18">
<button type="button" name="B1" title="Open 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 image" 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 colspan="1"><input type="file" id="fileElem" name="fileElem[]" onchange="OnFileSelect()" style="visibility:hidden;"></td>
</tr>
<tr>
<td>Original image:</td>
</tr>
<tr>
<td class="auto-style18"><img id="image1" src="../Bilder/Andie MacDowell.jpg" title="Andy"></td>
</tr>


<center>
<tr>
<td>Converted image:</td>
</tr>
</center>

<tr>
<td class="auto-style18"><canvas id="can" width="0" height="0"></canvas></td>
</tr>
</table>
</form>

<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 width,height,img,canvas,canvas2;
window.onload = function()
{ img = document.getElementById("image1");
canvas = document.getElementById("can");
width = img.width;
height = img.height;
DrawCanvas(canvas, img.width, img.height);
canvas2 = document.createElement("canvas"); };
function Open()
{ var fileElem = document.getElementById("fileElem");
fileElem.focus();
fileElem.click(); }
function Save()
{ var name = GetFileName(img.title)+"-grayscale"+GetFileExt(img.title);
canvas2.toBlob(function(blob) {
saveAs(blob, name); }); }
function OnImageLoaded()
{ width = img.naturalWidth;
height = img.naturalHeight;
if( img.width>200 )
img.width = 200;
DrawCanvas(canvas, img.width, img.height);
DrawCanvas(canvas2, width, height); }
function OnFileSelect(event)
{ var fileElem = document.getElementById("fileElem").files[0];
document.getElementById("fileElem").value="";
var reader = new FileReader();
img.title = fileElem.name;
reader.onload = function(e) {
img.onload = function() {
OnImageLoaded(); }
img.src = e.target.result; };
reader.readAsDataURL(fileElem); }
function DrawCanvas(obj, w, h)
{ obj.width = w;
obj.height = h;
obj.style.width = w+'px';
obj.style.height = h+'px';
obj.getContext("2d").drawImage(img, 0, 0, w, h);
Grayscale(obj,w,h); }
function Grayscale(obj,w,h)
{ var ctx = obj.getContext("2d");
var canvasData = ctx.getImageData(0, 0, width, height);
var x,y,i;
for(y=0; y<height; y++)
for(x=0; x<width; x++)
{ k = (x+y*width)*4;
i = 0.2126*canvasData.data[k+0]+0.7152*canvasData.data[k+1]+0.0722*canvasData.data[k+2];
i = Math.round(i);
canvasData.data[k+0] = i;
canvasData.data[k+1] = i;
canvasData.data[k+2] = i; }
ctx.putImageData(canvasData, 0, 0); }
</script>
</body>

</html>








Kontakt    Datenschutz   Impressum