So spiegeln Sie Bilder mit HTML5 horizontal

Im IE kann ich verwenden:

<img src="http://example.com/image.png" style="filter:FlipH">

um eine horizontale Bildspiegelung zu implementieren.

Gibt es eine Möglichkeit, in HTML5 horizontal zu spiegeln? (vielleicht mit Leinwand?)

danke an alle 🙂

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
canvasContext.drawImage(image, 0, 0);

Hier ist ein Ausschnitt aus einem Sprite-Objekt, das zum Testen verwendet wird und die Ergebnisse liefert, die Sie zu erwarten scheinen.

Hier ist eine andere Seite mit mehr Details. http://andrew.hedges.name/widgets/dev/

Sie brauchen kein HTML5, es kann mit CSS genauso gemacht werden wie im IE:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;

Ich mag Eschers Funktion oben. Ich habe es etwas übersichtlicher und besser gemacht. Ich habe hinzugefügt floppen (vertikal) neben Flip. Auch eine Möglichkeit dazu um die Mitte ziehen/drehen des Bildes statt oben links. Schließlich benötigt die Funktion nicht alle Argumente. img, x und y sind erforderlich, der Rest jedoch nicht.

Wenn Sie so etwas verwenden würden Kontext.drawImage(…)können Sie jetzt einfach verwenden drawImage(…) und fügen Sie die hier erläuterte Rotations-/Flip-/Flop-Funktionalität hinzu:

function drawImage(img, x, y, width, height, deg, flip, flop, center) {

context.save();

if(typeof width === "undefined") width = img.width;
if(typeof height === "undefined") height = img.height;
if(typeof center === "undefined") center = false;

// Set rotation point to center of image, instead of top/left
if(center) {
    x -= width/2;
    y -= height/2;
}

// Set the origin to the center of the image
context.translate(x + width/2, y + height/2);

// Rotate the canvas around the origin
var rad = 2 * Math.PI - deg * Math.PI / 180;    
context.rotate(rad);

// Flip/flop the canvas
if(flip) flipScale = -1; else flipScale = 1;
if(flop) flopScale = -1; else flopScale = 1;
context.scale(flipScale, flopScale);

// Draw the image    
context.drawImage(img, -width/2, -height/2, width, height);

context.restore();
}

Beispiele:

var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d"); // i use context instead of ctx

var img = document.getElementById("myImage"); // your img reference here!

drawImage(img, 100, 100); // just draw it 
drawImage(img, 100, 100, 200, 50); // draw it with width/height specified
drawImage(img, 100, 100, 200, 50, 45); // draw it at 45 degrees
drawImage(img, 100, 100, 200, 50, 0, true); // draw it flipped
drawImage(img, 100, 100, 200, 50, 0, false, true); // draw it flopped
drawImage(img, 100, 100, 200, 50, 0, true, true); // draw it flipflopped
drawImage(img, 100, 100, 200, 50, 45, true, true, true); // draw it flipflopped and 45 degrees rotated around the center of the image :-)

Eine Option besteht darin, die Pixel von Bildern, die in ImageData-Objekten gespeichert sind, direkt horizontal zu spiegeln, z

function flip_image (canvas) {
   	var context   = canvas.getContext ('2d') ;
   	var imageData = context.getImageData (0, 0, canvas.width, canvas.height) ;
   	var imageFlip = new ImageData (canvas.width, canvas.height) ;
   	var Npel      = imageData.data.length / 4 ;

   	for ( var kPel = 0 ; kPel < Npel ; kPel++ ) {
   	   	var kFlip      = flip_index (kPel, canvas.width, canvas.height) ;
   	   	var offset     = 4 * kPel ;
   	   	var offsetFlip = 4 * kFlip ;
   	   	imageFlip.data[offsetFlip + 0] = imageData.data[offset + 0] ;
   	   	imageFlip.data[offsetFlip + 1] = imageData.data[offset + 1] ;
   	   	imageFlip.data[offsetFlip + 2] = imageData.data[offset + 2] ;
   	   	imageFlip.data[offsetFlip + 3] = imageData.data[offset + 3] ;
   	}

   	var canvasFlip = document.createElement('canvas') ;
   	canvasFlip.setAttribute('width', width) ;
   	canvasFlip.setAttribute('height', height) ;

   	canvasFlip.getContext('2d').putImageData(imageFlip, 0, 0) ;
   	return canvasFlip ;
}

function flip_index (kPel, width, height) {
   	var i     = Math.floor (kPel / width) ;
   	var j     = kPel % width ;
   	var jFlip = width - j - 1 ;
   	var kFlip = i * width + jFlip ;
   	return kFlip ;
}

Spiegeln Sie ein Bild oder Rendering mithilfe der Leinwand.

Notiz. Das geht auch per CSS.

Spiegelung

Hier ist eine einfache Hilfsfunktion, die ein Bild horizontal, vertikal oder beides spiegelt.

function mirrorImage(ctx, image, x = 0, y = 0, horizontal = false, vertical = false){
    ctx.save();  // save the current canvas state
    ctx.setTransform(
        horizontal ? -1 : 1, 0, // set the direction of x axis
        0, vertical ? -1 : 1,   // set the direction of y axis
        x + (horizontal ? image.width : 0), // set the x origin
        y + (vertical ? image.height : 0)   // set the y origin
    );
    ctx.drawImage(image,0,0);
    ctx.restore(); // restore the state as it was when this function was called
}

Verwendung

mirrorImage(ctx, image, 0, 0, true, false); // horizontal mirror
mirrorImage(ctx, image, 0, 0, false, true); // vertical mirror
mirrorImage(ctx, image, 0, 0, true, true);  // horizontal and vertical mirror

Zeichenbares Bild.

Oft möchten Sie auf Bilder zeichnen. Ich nenne sie gerne zeichenbare Bilder. Um ein Bild zeichenbar zu machen, konvertieren Sie es in eine Leinwand

So konvertieren Sie ein Bild in eine Leinwand.

function makeImageDrawable(image){
    if(image.complete){ // ensure the image has loaded
        var dImage = document.createElement("canvas"); // create a drawable image
        dImage.width = image.naturalWidth;      // set the resolution
        dImage.height = image.naturalHeight;
        dImage.style.width = image.style.width; // set the display size
        dImage.style.height = image.style.height; 
        dImage.ctx = dImage.getContext("2d");   // get drawing API
                                                // and add to image
                                                // for possible later use
        dImage.ctx.drawImage(image,0,0);
        return dImage;
    }
    throw new ReferenceError("Image is not complete.");
 }

Alles zusammenfügen

 var dImage = makeImageDrawable(image);  // convert DOM img to canvas
 mirrorImage(dImage.ctx, dImage, 0, 0, false, true); // vertical flip
 image.replaceWith(dImage);  // replace the DOM image with the flipped image
 

Mehr Spiegel

Wenn Sie entlang einer beliebigen Linie spiegeln möchten, lesen Sie die Antwort Entlang einer Linie spiegeln

Ich bin auf diese Seite gestoßen, und niemand hatte eine Funktion geschrieben, um das zu tun, was ich wollte, also hier ist meine. Es zeichnet skalierte, gedrehte und gespiegelte Bilder (ich habe dies zum Rendern von DOM-Elementen auf Leinwand verwendet, auf die diese Transformationen angewendet wurden).

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = document.getElementById("myimage.jpg"); //or whatever
var deg = 13; //13 degrees rotation, for example
var flip = "true";

function drawImage(img, x, y, width, height, deg, flip){
    //save current context before applying transformations
    ctx.save();
    //convert degrees to radians
    if(flip == "true"){ 
        var rad = deg * Math.PI / 180;
    }else{
        var rad = 2*Math.PI - deg * Math.PI / 180;
    }
    //set the origin to the center of the image
    ctx.translate(x + width/2, y + height/2);
    //rotate the canvas around the origin
    ctx.rotate(rad);
    if(flip == "true"){
        //flip the canvas
        ctx.scale(-1,1);
    }
    //draw the image    
    ctx.drawImage(img, -width/2, -height/2, width, height);
    //restore the canvas
    ctx.restore();
}

Für alle, die darüber stolpern. Wenn Sie komplexere Zeichnungen erstellen möchten, funktionieren die anderen maßstabsbasierten Antworten nicht alle. Mit „komplex“ meine ich Situationen, in denen die Dinge dynamischer sind, wie bei Spielen.

Das Problem ist, dass der Standort auch umgedreht wird. Wenn Sie also ein kleines Bild in der oberen linken Ecke der Leinwand zeichnen und es dann horizontal spiegeln möchten, wird es nach oben rechts verschoben.

Die Lösung besteht darin, in die Mitte zu übersetzen, in der Sie das Bild zeichnen möchten, dann zu skalieren und dann zurück zu übersetzen. So:

if (flipped) {
  ctx.translate(x + width/2, y + width/2);
  ctx.scale(-1, 1);
  ctx.translate(-(x + width/2), -(y + width/2));
}
ctx.drawImage(img, x, y, width, height);

Hier sind x und y die Position, an der Sie das Bild zeichnen möchten, und Breite und Höhe sind die Breite und Höhe, an der Sie das Bild zeichnen möchten.