Pixelmanipulation

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

asd1234

Neues Mitglied
16 April 2021
6
0
1
25
Hallo zusammen,
ich will einen Bildrasterungsfilter mit Rastergröße, die über einen Schieberegler ausgewählt werden kann, programmieren.
Was habe ich falsch gemacht?
Danke im Voraus!

HTML:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pixel</title>
  <script type="text/javascript">
    window.addEventListener('load', canvasApp, false);

    function canvasApp() {
      if (!document.createElement('canvas').getContext) {
        return;
      }


      //Event Listener für Änderungen der Rastergröße
      document.getElementById("sizeInput").addEventListener("change", onSizeChange);

      var theCanvas = document.getElementById('canvas');
      var context = theCanvas.getContext('2d');

      var image = new Image();
      image.addEventListener('load', onImageLoaded);
      image.src = 'bild.jpg';

      var imgWidth;
      var imgHeight;

      function onImageLoaded(e) {
        imgWidth = image.width;
        imgHeight = image.height;
        drawCanvas();
      }


      function drawCanvas() {
        context.drawImage(image, 0, 0);

        var imgData = context.getImageData(0, 0, imgWidth, imgHeight);

        var rasterSize = size;
       
        for (var x = 0; x < imgData.width; x++) {
          for (var y = 0; x < imgData.height; y++) {

            var rasterX = ((x / rasterSize | 0) * rasterSize);
            var rasterY = ((y / rasterSize | 0) * rasterSize);

            var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;


            r = imgData.data[rasterValIndex]; 
            g = imgData.data[rasterValIndex + 1]; 
            b = imgData.data[rasterValIndex + 2]; 
            a = imgData.data[rasterValIndex + 3]; 

            // Pixel setzen in x, y
            imgData.data[rasterValIndex++] = 255;
            imgData.data[rasterValIndex++] = 0;
            imgData.data[rasterValIndex++] = 0;
            imgData.data[rasterValIndex] = 255;      

        }

        context.putImageData(imgData, 0, 0);
      }

      function onSizeChange(e) {
        size = e.target.value;
        drawCanvas();
      }
    }

  </script>
  </head>
<body>
<div style="position: absolute; top: 0; left: 0;">
  <canvas id="canvas" width="615" height="410" >
    Your browser does not support the HTML 5 Canvas.
  </canvas>

  <form>
    <input type="range" id="sizeInput" min="2" max="100" step="1" value="100">
  </form>
</div>
</body>
</html>
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.684
177
63
Minden
basti1012.de
Canvas ist nicht mein Fach , aber Klammern Zählen.
Ich glaube das deine function canvasApp() , nicht geschlossen wird.
Dein Slider ruft ja die function onSizeChange auf.
Die ist aber in der function drawCanvas() und sollte bei den jetzigen Klammern Positionen nicht aufrufbar sein.

Das sind jetzt meine Vermutungen und nicht getestet.

EDIT: Ich habe, das selber mal versucht zum Laufen zu bekommen, da Canvas nicht mein Fach ist, bin ich auch nicht weit gekommen.
Irgendwie lassen deine beiden Schleifen den Browser abstürzen.
Was möchtest du eigentlich erreichen?
Was soll sich ändern, wenn man den Schieber bewegt?
Weil Bildrasterungsfilter ergibt bei Google 0 Treffer
 
Zuletzt bearbeitet:

asd1234

Neues Mitglied
16 April 2021
6
0
1
25
Canvas ist nicht mein Fach , aber Klammern Zählen.
Ich glaube das deine function canvasApp() , nicht geschlossen wird.
Dein Slider ruft ja die function onSizeChange auf.
Die ist aber in der function drawCanvas() und sollte bei den jetzigen Klammern Positionen nicht aufrufbar sein.

Das sind jetzt meine Vermutungen und nicht getestet..
Danke für Hinweis
trotzdem funktioniert nicht .....:oops: Auch wenn ich var rasterSize = 10; ohne funktion onSizeChange initialisiere

HTML:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pixel</title>
  <script type="text/javascript">
    window.addEventListener('load', canvasApp, false);

    function canvasApp() {
      if (!document.createElement('canvas').getContext) {
        return;
      }


      //Event Listener für Änderungen der Rastergröße
      document.getElementById("sizeInput").addEventListener("change", onSizeChange);

      var theCanvas = document.getElementById('canvas');
      var context = theCanvas.getContext('2d');

      var image = new Image();
      image.addEventListener('load', onImageLoaded);
      image.src = 'bild.jpg';

      var imgWidth;
      var imgHeight;

      function onImageLoaded(e) {
        imgWidth = image.width;
        imgHeight = image.height;
        drawCanvas();
      }


      function drawCanvas() {
        context.drawImage(image, 0, 0);

        var imgData = context.getImageData(0, 0, imgWidth, imgHeight);

        var rasterSize = size;
      
        for (var x = 0; x < imgData.width; x++) {
          for (var y = 0; x < imgData.height; y++) {

            var rasterX = ((x / rasterSize | 0) * rasterSize);
            var rasterY = ((y / rasterSize | 0) * rasterSize);

            var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;


            r = imgData.data[rasterValIndex];
            g = imgData.data[rasterValIndex + 1];
            b = imgData.data[rasterValIndex + 2];
            a = imgData.data[rasterValIndex + 3];

            // Pixel setzen in x, y
            imgData.data[rasterValIndex] = r;
            imgData.data[rasterValIndex + 1] = 0;
            imgData.data[rasterValIndex + 2] = 0;
            imgData.data[rasterValIndex + 3] = a;
          }
        }

        context.putImageData(imgData, 0, 0);
      }

      function onSizeChange(e) {
        size = e.target.value;
      }

    }

    

  </script>
  </head>
<body>
<div style="position: absolute; top: 0; left: 0;">
  <canvas id="canvas" width="615" height="410" >
    Your browser does not support the HTML 5 Canvas.
  </canvas>

  <form>
    <input type="range" id="sizeInput" min="2" max="100" step="1" value="100">
  </form>
</div>
</body>
</html>
 

basti1012

Senior HTML'ler
26 November 2017
1.684
177
63
Minden
basti1012.de
Hier ist noch ein Fehler , das könnte den Absturz des Browsers erklären
Code:
  for (var y = 0; x < imgData.height; y++) {

Wenn du die Fehler aus 2#,4# und 5# beseitigst, geht es eigentlich schon.
Zumindest sehe ich jetzt ein Bild was sich ändert, wenn man den Slider nutzt
 
Zuletzt bearbeitet:
  • Like
Reaktionen: asd1234

asd1234

Neues Mitglied
16 April 2021
6
0
1
25
Hier ist noch ein Fehler , das könnte den Absturz des Browsers erklären
Code:
  for (var y = 0; x < imgData.height; y++) {

Wenn du die Fehler aus 2#,4# und 5# beseitigst, geht es eigentlich schon.
Zumindest sehe ich jetzt ein Bild was sich ändert, wenn man den Slider nutzt
Basti1012, danke!!!!! Bei mir ist immer so.... :cool:
drei tagen habe ich gekämpfto_O:confused:o_O
 

basti1012

Senior HTML'ler
26 November 2017
1.684
177
63
Minden
basti1012.de
Da es jetzt geht bei dir ,kann ich dir noch meine Änderungen zeigen ,
Die gesagten Fehler habe ich so geändert bzw. behoben.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel</title>
<script>
window.addEventListener('DOMContentLoaded', function(){
    document.getElementById("sizeInput").addEventListener('change',function(e){
        drawCanvas(this.value)
    })
    var imgWidth;
    var imgHeight;
    var theCanvas = document.getElementById('canvas');
    var context = theCanvas.getContext('2d');
    var image = new Image();
    image.src = '../../image/2.png';
    image.addEventListener('load',function() {
        imgWidth = image.width;
        imgHeight = image.height;
        drawCanvas(0);
    })

    function drawCanvas(size) {
        console.log(size,imgWidth,imgHeight)
        context.drawImage(image, 0, 0);
        var imgData = context.getImageData(0, 0, imgWidth, imgHeight);
        var rasterSize = size;
    
        for (var x = 0; x < imgData.width; x++) {
            for (var y = 0; y < imgData.height; y++) {
                var rasterX = ((x / rasterSize | 0) * rasterSize);
                var rasterY = ((y / rasterSize | 0) * rasterSize);
                var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;

                r = imgData.data[rasterValIndex];
                g = imgData.data[rasterValIndex + 1];
                b = imgData.data[rasterValIndex + 2];
                a = imgData.data[rasterValIndex + 3];

                imgData.data[rasterValIndex] = r;
                imgData.data[rasterValIndex + 1] = 0;
                imgData.data[rasterValIndex + 2] = 0;
                imgData.data[rasterValIndex + 3] = a;
            }
        }
        context.putImageData(imgData, 0, 0);
    }
})
</script>
</head>
<body>
    <div>
        <canvas id="canvas" width="615" height="410" >
             Your browser does not support the HTML 5 Canvas.
        </canvas>
        <form>
            <input type="number" id="sizeInput" min="1" max="100" step="1" value="100">
        </form>
    </div>
</body>
</html>
Beim Debuggen hatte ich dein type=range in type=number geändert.
Ob man da noch was besser machen kann müßte der Canvas Experte mal was zu sagen.
 

hamudi#10

Neues Mitglied
12 Oktober 2021
1
0
1
41
Mach deine Uni-Aufgaben alleine! Unglaublich und so jemand besteht dann den Kurs (ich denke wir sind im selben Kurs).
 
Werbung: