翻转图像html,如何使用HTML5水平翻转图像

8 个答案:

答案 0 :(得分：81)

canvas = document.createElement('canvas');

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

canvasContext.translate(width, 0);

canvasContext.scale(-1, 1);

this.canvasContext.drawImage(image, 0, 0);

这是一个用于测试的精灵对象的片段，它会产生你期望的结果。

答案 1 :(得分：68)

您不需要HTML5，可以使用与IE相同的CSS来完成：

-moz-transform: scale(-1, 1);

-webkit-transform: scale(-1, 1);

-o-transform: scale(-1, 1);

transform: scale(-1, 1);

filter: FlipH;

答案 2 :(得分：10)

我喜欢上面的Eschers功能。我让它变得更整洁更好。除了翻转，我还添加了翻转(垂直)。还可以围绕图像的中心绘制/旋转而不是左上角。最后，该函数不需要所有参数。 img，x和y是必需的，但其余的不是。

如果您使用context.drawImage(...)之类的东西，现在可以使用drawImage(...)并添加旋转/翻转/这里解释了翻牌功能：

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

}

示例：

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

答案 3 :(得分：3)

答案 4 :(得分：2)

我遇到过这个页面，没有人写过一个功能来做我想做的事情，所以这里是我的。它绘制缩放，旋转和翻转的图像(我用它来将DOM元素渲染到应用了这些变换的画布)。

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

}

答案 5 :(得分：2)

使用画布镜像图像或渲染。

请注意。这也可以通过CSS完成。

镜像

这是一个简单的效用函数，可以水平，垂直或同时镜像图像。

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

}

用法

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

可绘制图像。

很多时候你会想要画图像。我喜欢称它们为可绘图像。要使图像可绘制，请将其转换为画布

将图像转换为画布。

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

}

全部放在一起

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

更多镜子

如果您希望能够沿任意一行进行镜像，请参阅答案Mirror along line

答案 6 :(得分：1)

对于绊脚石的任何人。

如果要绘制更复杂的图形，则其他基于比例的答案并不能全部起作用。 “复杂”是指情况变得更加动态的情况，例如游戏。

问题在于位置也被翻转了。因此，如果您想在画布的左上角绘制一个小图像然后水平翻转，它将重新定位在右上角。

解决方法是平移到要绘制图像的中心，然后缩放，然后平移回去。像这样：

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

此处x和y是您要绘制图像的位置，而width和height是您要绘制图像的宽度和高度。

答案 7 :(得分：1)

一种选择是直接水平翻转存储在ImageData对象中的图像的像素，例如，

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 ;

}