Cómo voltear imágenes horizontalmente con HTML5

En IE, puedo usar:

 

para implementar una imagen volteada horizontalmente.

¿Hay alguna forma de voltear horizontalmente en HTML5? (tal vez mediante el uso de canvas?)

gracias a todos 🙂

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

Aquí hay un fragmento de un objeto sprite que se usa para probar y produce los resultados que pareces esperar.

Aquí hay otro sitio con más detalles. http://andrew.hedges.name/widgets/dev/

No necesita HTML5, se puede hacer con CSS igual que en IE:

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

Me gusta el funcionamiento de Eschers arriba. Lo he hecho un poco más limpio y mejor. He añadido flop (verticalmente) además de flip. También existe la posibilidad de dibujar / rotar alrededor del centro de la imagen en lugar de arriba a la izquierda. Finalmente, la función no requiere todos los argumentos. img, xey son obligatorios, pero el rest no.

Si estuviera usando algo como context.drawImage (…) , ahora puede simplemente usar drawImage (…) y agregar la funcionalidad de rotar / voltear / flop que se explica aquí:

 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.restre(); } 

Ejemplos:

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

Prueba este plugin

Demostración: http://dmadan.in/imageflip.html

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

Funciona tanto en css3 como en Canvas.

Encontré esta página, y nadie había escrito una función para hacer lo que yo quería, así que aquí está la mía. Dibuja imágenes escaladas, giradas y volteadas (utilicé esto para desgarrar elementos DOM a canvas que tienen estas transformadas aplicadas).

 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); //restre the canvas ctx.restre(); } 

Una opción es voltear horizontalmente los píxeles de las imágenes almacenadas en objetos ImageData directamente, por ejemplo

 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 ; } 

Refleja una imagen o renderizado usando el canvas.

Nota. Esto se puede hacer a través de CSS también.


Reflejando

Aquí hay una función de utilidad simple que reflejará una imagen horizontal, vertical o ambas.

 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.restre(); // restre the state as it was when this function was called } 

Uso

 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 

Imagen extraíble.

Muchas veces querrás dibujar en imágenes. Me gusta llamarlos imágenes dibujables. Para hacer una imagen dibujable, conviértala en un canvas

Para convertir una imagen en canvas.

 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."); } 

Poniendolo todo junto

  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 

Más espejos

Si deseas poder reflejar a lo largo de una línea arbitraria, mira la respuesta Espejo a lo largo de la línea