So spiegeln Sie Bilder horizontal mit HTML5

In IE kann ich verwenden:

 

um ein Bild horizontal zu spiegeln.

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

Danke an alle 🙂

 canvas = document.createElement('canvas'); canvasContext = canvas.getContext('2d'); canvasContext.translate(width, 0); canvasContext.scale(-1, 1); this.canvasContext.drawImage(image, 0, 0); 

Hier ist ein Ausschnitt aus einem Sprite-Objekt, das zum Testen verwendet wird und die Ergebnisse erzeugt, 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 wie in IE gemacht werden:

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

Ich mag Eschers function oben. Ich habe es ein wenig besser und besser gemacht. Ich habe Flop (vertikal) neben Flip hinzugefügt. Auch eine Möglichkeit, um die Mitte des Bildes statt oben links zu zeichnen / rotieren . Schließlich benötigt die function nicht alle Argumente. img, x und y sind erforderlich, aber der Rest nicht.

Wenn Sie etwas wie context.drawImage (…) verwenden , können Sie jetzt einfach drawImage (…) verwenden und die hier erläuterte function zum Drehen / Flipflop hinzufügen:

 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 :-) 

Probiere dieses Plugin aus

Demo: http://dmadan.in/imageflip.html

Quelle: https://github.com/dmadan86/imageflip

Es funktioniert in CSS3 und Canvas.

Ich bin auf diese Seite gestoßen, und niemand hatte eine function geschrieben, um zu tun, was ich wollte, also hier ist meins. Es zeichnet skalierte, gedrehte und umgedrehte Bilder (ich benutzte dies für das Rendern von DOM-Elementen auf Canvas, 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(); } 

Eine Möglichkeit 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 Zeichenfläche.

Hinweis. Dies kann auch über CSS erfolgen.


Spiegelung

Hier ist eine einfache Dienstprogrammfunktion, 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 

Zeichnbares Bild.

Viele Male möchten Sie auf Bilder zeichnen. Ich nenne sie gerne ziehbare Bilder. Um ein Bild zu zeichnen, konvertieren Sie es in eine canvas

So wandeln Sie ein Bild in eine canvas um.

 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 zusammensetzen

  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 in der Lage sein möchten, entlang einer beliebigen Linie zu spiegeln, sehen Sie sich die Antwort Spiegelung entlang der Linie an