Como inverter imagens horizontalmente com HTML5

No IE, posso usar:

 

para implementar uma imagem flip horizontalmente.

Existe alguma maneira de virar horizontalmente em HTML5? (talvez usando canvas?)

obrigado tudo ūüôā

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

Aqui está um trecho de um object sprite sendo usado para teste e produz os resultados que você espera.

Aqui est√° outro site com mais detalhes. http://andrew.hedges.name/widgets/dev/

Você não precisa de HTML5, isso pode ser feito com CSS como no IE:

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

Eu gosto da function Eschers acima. Eu fiz um pouco mais puro e melhor. Eu adicionei flop (verticalmente) além de flip. Também é possível desenhar / girar em torno do centro da imagem em vez de no canto superior esquerdo. Finalmente, a function não requer todos os argumentos. img, xey são obrigatórios, mas os demais não são.

Se voc√™ estava usando algo como context.drawImage (…) , agora voc√™ pode apenas usar drawImage (…) e adicionar a funcionalidade de rota√ß√£o / flip / flop explicada aqui:

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

Exemplos:

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

Experimente este plugin

Demonstração: http://dmadan.in/imageflip.html

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

Funciona tanto no css3 como no Canvas.

Eu me deparei com esta p√°gina, e ningu√©m tinha escrito uma function para fazer o que eu queria, ent√£o aqui est√° o meu. Ele desenha imagens dimensionadas, giradas e invertidas (usei isso para elementos DOM rending na canvas que possuem essas transforma√ß√Ķes 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); //restore the canvas ctx.restore(); } 

Uma opção é inverter horizontalmente os pixels das imagens armazenadas em objects ImageData diretamente, por exemplo

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

Espelhe uma imagem ou renderização usando a canvas.

Nota. Isso pode ser feito via CSS também.


Espelhamento

Aqui est√° uma function de utilidade simples que ir√° espelhar uma imagem horizontalmente, verticalmente ou ambos.

 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 } 

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 

Imagem Drawable.

Muitas vezes você vai querer desenhar em imagens. Eu gosto de chamá-los de imagens desenhadas. Para tornar uma imagem drawable você convertê-lo em uma canvas

Para converter uma imagem em 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."); } 

Colocando tudo 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 

Mais espelhos

Se você deseja ser capaz de espelhar ao longo de uma linha arbitrária, veja a resposta Espelhar ao longo da linha