Comment retourner des images horizontalement avec HTML5
Dans IE, je peux utiliser:
<img src="http://example.com/image.png" style="filter:FlipH">
pour implémenter un retournement d'image horizontalement.
Existe-t-il un moyen de retourner horizontalement en HTML5? (peut-être en utilisant de la toile?)
merci a tous :)
canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');
canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
this.canvasContext.drawImage(image, 0, 0);
Voici un extrait d'un objet Sprite utilisé pour les tests et il produit les résultats que vous attendez.
Voici un autre site avec plus de détails. http://andrew.hedges.name/widgets/dev/
Vous n'avez pas besoin de HTML5, cela peut être fait avec CSS comme dans IE:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;
J'aime la fonction Eschers ci-dessus. Je l'ai rendu un peu plus soigné et meilleur. J'ai ajouté flop (verticalement) en plus de flip. Également une possibilité de dessiner/faire pivoter autour du centre de l'image au lieu de en haut à gauche. Enfin, la fonction ne nécessite pas tous les arguments. img, x et y sont obligatoires mais les autres ne le sont pas.
Si vous utilisiez quelque chose comme context.drawImage (...), vous pouvez maintenant simplement utiliser drawImage (...) et ajouter la fonctionnalité de rotation/basculement/flop expliquée ici:
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();
}
Exemples:
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 :-)
Essayez ce plugin
Démo: http://dmadan.in/imageflip.html
Source: https://github.com/dmadan86/imageflip
Il fonctionne à la fois en CSS3 et en Canvas.
Je suis tombé sur cette page, et personne n'avait écrit une fonction pour faire ce que je voulais, alors voici la mienne. Il dessine des images mises à l'échelle, pivotées et retournées (je l'ai utilisé pour rendre les éléments DOM sur le canevas auxquels ces transformations sont appliquées).
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();
}
Dupliquez une image ou un rendu à l'aide du canevas.
Remarque. Cela peut également être fait via CSS.
Miroir
Voici une fonction utilitaire simple qui reflétera une image horizontalement, verticalement ou les deux.
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
}
Usage
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
Image dessinable.
Plusieurs fois, vous voudrez dessiner sur des images. J'aime les appeler des images dessinables. Pour rendre une image dessinable, vous la convertissez en toile
Pour convertir une image en canevas.
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.");
}
Mettre tous ensemble
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
Plus de miroirs
Si vous souhaitez pouvoir refléter le long d'une ligne arbitraire voir la réponse Miroir le long de la ligne
Une option consiste à inverser directement les pixels des images stockées dans les objets ImageData, par exemple.
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 ;
}