Wie Horizontale und vertikale Spiegelung bei Javascript?

Hallo,
weiß jemand wie man Bilder spiegelt ohne rotate methode?

Answer 1

[Suiram1]

Es wäre nicht direkt über JavaScript, aber du könntest JavaScript verwenden, um das style Attribut auf die folgenden Werte zu setzen: Für horizontale Spiegelung "transform: scaleX(-1);" und für die vertikale Spiegelung "transform: scaleY(-1);"

Woher ich das weiß: Hobby

Comments

[Mathuix229]

kann leider nicht transform nutzen bei der Aufgabe :/

[Suiram1]

@Mathuix229

Welche methoden sind denn überhaupt verboten / erlaubt?

[Mathuix229]

@Suiram1

Ich soll mit Canvas arbeiten und dann die Bilder spiegeln ohne den Einsatz von Bibliotheken oder Translate und rotate nutzen sonst ist alles erlaubt.

[Suiram1]

@Mathuix229

Müsse so gehen:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "bild.png";

image.onload = function() {
  ctx.drawImage(image, 0, 0);

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  // Spiegeln
  for (var y = 0; y < canvas.height; y++) {
    for (var x = 0; x < canvas.width / 2; x++) {
      var indexLeft = (y * canvas.width + x) * 4;
      var indexRight = (y * canvas.width + (canvas.width - x - 1)) * 4;

      for (var i = 0; i < 4; i++) {
        var temp = data[indexLeft + i];
        data[indexLeft + i] = data[indexRight + i];
        data[indexRight + i] = temp;
      }
    }
  }

  // Bearbeitete pixel setzen
  ctx.putImageData(imageData, 0, 0);
};

Hier werden alle Pixel manuell gespiegelt (in dem fall horizontal).

Du musst nur ein <canvas> element mit der id 'canvas' haben.