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

Pixelmanipulation

A

asd1234

Neues Mitglied
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:
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:
basti1012 schrieb:
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..
Zum Vergrößern anklicken....
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>
 
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:
basti1012 schrieb:
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
Zum Vergrößern anklicken....
Basti1012, danke!!!!! Bei mir ist immer so.... :cool:
drei tagen habe ich gekämpfto_O:confused:o_O
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben