JavaScript Javascript/HTML

Mina27 · 18. Dezember 2019

Hallo,
ich wollte ein Webseite/ Programm erstellen, wo ich durch mit Javascript die Farben (Rot,Grün,Blau,Negativ) eines Bildes ändere.
Meine Webseite zeigt alles an, das Bild und die dazugehörigen Buttons aber habe probleme bei der anwendung bzw. das Bild verändert sich nicht. Kann mir vielleicht jemand sagen wo mein Fehler liegt?

Hier Javascript:

function loadImage(filename, canvas){
var img= new Image();
img.onload= function(){
showImage(img, canvas);
}
img.src= filename;
return img;
}
//Aufhellen/Aufdunkeln
function showImage(img, canvas) {
canvas.width=img.naturalWidth;
canvas.height= img.naturalHeight;
var context = canvas.getContext('2d');
if (context) {
context.drawImage(img, 0,0);
}
else {
alert("Error: Context not defined!");
}
}
var canvas = document.getElementById('bilder');
var img;
if(canvas && canvas.getContext){
img= loadImage("Fotos/Himmel.jpg", canvas);
}

function LightenDarkenColor(col, amt) {
var usePound= false;
if (col[0] == "#"){
col = col.slice(1);
usePound= true;
}
var num = parseInt(col,16);
var r= (num >> 16) + amt;
if(r > 255) r= 255;
else if (r < 0) r = 0;

var b= ((num >> 8) & 0x00FF) + amt;

if (b > 255) b= 255;
else if( r < 0 ) b = 0;

var g = (num & 0x0000FF) + amt;

if (g > 255) g= 255;
else if (g < 0) g = 0;
return (usePound?"#":"")+ ( g | (b << 8) | (r << 16)).toString(16);
}
//rot
function changeColor (red) {
for (var i= 0;i< pixel; i += 4){
pixel = pixel ;
pixel [i+1] = 0;
pixel [i+2] = 0;
}
// grün
function changeColor(green) {}
for (var i= 0; i< pixel; i += 4)
{

pixel = 0;
pixel [i+1] = pixel [i+1];
pixel [i+2] = 0;
}
//Blau
function changeColor(blue) {}
for (var i= 0; i< pixel; i += 4)
{

pixel = 0;
pixel [i+1] = 0;
pixel [i+2] = pixel [i+2];
}
//negativ
var imageData = context.getImageData(imageX, imageY, image.width, image.height);
var dataArr = imageData.data;

for(var i = 0; i < dataArr.length; i += 4)
{
var r = dataArr; // Red color lies between 0 and 255
var g = dataArr[i + 1]; // Green color lies between 0 and 255
var b = dataArr[i + 2]; // Blue color lies between 0 and 255
var a = dataArr[i + 3]; // Transparency lies between 0 and 255

var invertedRed = 255 - r;
var invertedGreen = 255 - g;
var invertedBlue = 255 - b;

dataArr = invertedRed;
dataArr[i + 1] = invertedGreen;
dataArr[i + 2] = invertedBlue;
}

context.putImageData(imageData, imageX, imageY);

Hier HTML :

<!DOCTYPE html>
<html>
<head>
<title> Image </title>
<head> <script type="text/javascript" src="2java.js"> </script> </head>
<body>
<img src="Fotos/Himmel.jpg"width="300" height="300" id="Image">
<script> function loadImage(filename, canvas); {
img.src=filename; }
</script>
<script> function showImage(img, canvas); {
img.src=img;
} </script>
</head>
<body>
<canvas id="bilder">
Canvas wird nicht unterstützt.
</canvas>
<div>
<figure>
<label for="LightenDarkenColor">Aufhellen Abdunkeln</label>
<input id="LightenDarkenColor" type="range" min="0" max="100" value="50"/>
</figure>
</div>
<figure>
<input id="Red-Id" value="Rotfilter" type="button">
<input id="Green-Id" value="Grünfilter" type="button">
<input id="Blue-Id" value="Blaufilter" type="button">
</figure>
<div>
<input id="Negativ-Id" value="Negativerstellung" type="button">
</div>
<div>
<input id="Gauß-Id" value="Gaußfilter" type="button">
<input id="Kanten-Id" value="Implementierung einer Kantenerkennung" type="button">
</div>
<script>
var canvas = document.getElementById('bilder')
var img;
if(canvas&& canvas.getContext){
img= loadImage.showImage("Fotos/Himmel.jpg", canvas);
}
</script>
<script> LightenDarkenColor(); </script>

<script> changeColor(); </script>
<script>
var changeColor = document.getElementById('Red-Id')
changeColor.addEventListener.onclick('click',Red-Id);
</script>
<script>
var changeColor = document.getElementById('Green-id');
changeColor.addEventListener.onbclick('click' ,Green-id);
</script>
<script>
var changeColor = document.getElementById('Blue-id');
changeColor.addEventListener('click', Blue-id);
</script>
<script>
var negative = document.getElementById('Negative-Id');
negative.addEventListener.onclick('click', Negativ-Id)
</script>
<script> var changeFilter = document.getElementById('Gauß-Id');
gauß.addEventListener.getElementById('click', Gauß-Id)
</script>
<script> var ChangeImplemntierung = document.getElementById('Kanten-Id');
ChangeImplemntierung.addEventListener.onclick('click', Kanten-Id) </script>

Vielen Dank im Voraus.

failormooNN · 18. Dezember 2019

Hey, auf Dein Script habe ich keine Antwort, Du kannst allerdings auch die Farbe eines Bildes per Filter anpassen. Schau mal hier, vllt. hilft Dir das.

Mina27 · 18. Dezember 2019

failormooNN schrieb:
Hey, auf Dein Script habe ich keine Antwort, Du kannst allerdings auch die Farbe eines Bildes per Filter anpassen. Schau mal hier, vllt. hilft Dir das.

Hey, danke aber das ist eine Hausarbeit und wenn ich die normal von css anwende, ich leider keine Punkte kriegen werde

. Es ist vorausgesetzt diese mit Javascript zu erfüllen. Aber trotzdem dankeschön.

blablub1212 · 18. Dezember 2019

Dein Problem liegt unteranderem darin, wie du den Buttons eine Aktion zu weisen möchtest:

Javascript:

var changeColor = document.getElementById('Green-id');
changeColor.addEventListener.onbclick('click' ,Green-id);

Fehler im Beispiel:

Tippfehler: onbclick
Falscher Aufruf der Funktion addEventlistener: onclick nicht notwendig, Funktion Green-id gibt es nicht.

Ich hab dir mal ein Minimal-Beispiel angehängt wie man das machen könnte:

https://codepen.io/blablub121/pen/YzPNEKa

Tokolosh · 18. Dezember 2019

Mina27 schrieb:

Javascript:

</script>

<script> LightenDarkenColor(); </script>


  <script> changeColor(); </script>

      <script>

      var changeColor = document.getElementById('Red-Id')

      changeColor.addEventListener.onclick('click',Red-Id);

      </script>

      <script>

      var changeColor = document.getElementById('Green-id');

      changeColor.addEventListener.onbclick('click' ,Green-id);

      </script>

      <script>

      var changeColor = document.getElementById('Blue-id');

      changeColor.addEventListener('click', Blue-id);

      </script>

      <script>

      var negative = document.getElementById('Negative-Id');

      negative.addEventListener.onclick('click', Negativ-Id)

      </script>

      <script> var changeFilter = document.getElementById('Gauß-Id');

      gauß.addEventListener.getElementById('click', Gauß-Id)

       </script>

       <script> var ChangeImplemntierung = document.getElementById('Kanten-Id');

       ChangeImplemntierung.addEventListener.onclick('click', Kanten-Id) </script>

Vielen Dank im Voraus.

Das sieht auch irgendwie danach aus, als wenn sich überhaupt nicht mit der Sprache beschäftigt wurde.

BeBur · 19. Dezember 2019

Wieso auch damit beschäftigen, einfach anonym in Foren nachfragen, die berichtigen sogar Rechtschreibefehler..

Suche

JavaScript Javascript/HTML

Mina27

Newbie

failormooNN

Lt. Commander

Mina27

Newbie

blablub1212

Rear Admiral

Tokolosh

Lieutenant

BeBur

Commodore

Ähnliche Themen