如何水平翻转一张图片

Question

如何只绘制两幅图像并反转我不知道如何反转。请帮忙。

    var canvas = document.createElement('canvas');
    canvas.width = 16 * scale;
    canvas.height = 32 * scale;
    //we assign the same classname the image has, for CSS purposes
    canvas.setAttribute('class', skinImage.getAttribute('class'));
    canvas.setAttribute('title', skinImage.getAttribute('title'));
    var context = canvas.getContext("2d"),
    s = scale;
    context.imageSmoothingEnabled=!1,
    context.mozImageSmoothingEnabled=!1,
    context.oImageSmoothingEnabled=!1,
    CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1,
    context.clearRect(0,0,canvas.width,canvas.height);

    //back draw the head
    context.drawImage(skinImage, 24,  8,  8, 8,  4*s,  0*s,  8*s, 8*s);
    //back draw the body
    context.drawImage(skinImage, 32, 20, 8, 12, 4*s,  8*s,  8*s, 12*s);
    //back draw the right leg
    context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s,  4*s, 12*s);
    //back draw the right arm
    context.drawImage(skinImage, 12, 20, 4, 12, 8*s,  20*s, 4*s, 12*s);

    //back draw the left arm
    context.drawImage(skinImage, 12, 20, 4, 12, 4*s,  20*s, 4*s, 12*s);
    context.drawImage(skinImage, 52, 20, 4, 12, 0*s,  8*s,  4*s, 12*s);

- Trke Rap

---

为什么我们不使用CSS？transform: scaleX(-1); - sairfan

Answer 1

首先，要删除您不需要的 2 张图像，只需清除画布并重新绘制所需的图像。您可以使用 context.clearRect(0,0,canvas.width,canvas.height) 来清除画布。

水平翻转图像：

如何水平翻转图像：

1. 将画布原点移动（平移）到所需的 X 坐标加上图像宽度：context.translate(x+img.width,y); 添加 img.width 是必要的，因为我们正在获取图像的左边缘并向左翻转它。如果不添加 img.width，则图像将在所需的 x 坐标左侧绘制。

2. 使用 context.scale(-1,1); 进行水平翻转

3. 绘制图像：`context.drawImage(img,0,0);

4. 通过将转换重置为其默认值来进行清理：context.setTransform(1,0,0,1,0,0);

带注释的代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png";
function start(){

    ctx.fillText('original',10,30);
    ctx.drawImage(img,10,30);

    ctx.fillText('flipped',150,30);
    flipHorizontally(img,150,30);

}

function flipHorizontally(img,x,y){
    // move to x + img's width
    ctx.translate(x+img.width,y);

    // scaleX by -1; this "trick" flips horizontally
    ctx.scale(-1,1);
    
    // draw the img
    // no need for x,y since we've already translated
    ctx.drawImage(img,0,0);
    
    // always clean up -- reset transformations to default
    ctx.setTransform(1,0,0,1,0,0);
}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

[补充：翻转精灵图]

如果要翻转包含在精灵图中的精灵，可以使用裁剪形式的drawImage。裁剪drawImage将通过指定精灵的spriteX、spriteY、spriteWidth和spriteHeight从精灵表中裁剪所需的精灵。同样，通过指定所需的画布canvasX、canvasY、spriteWidth和spriteHeight，裁剪的子图像也会在画布上绘制。

这里是演示如何从精灵表中翻转精灵的代码

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg";
function start(){

  var spriteX=92;
  var spriteY=63;
  var spriteW=80;
  var spriteH=40;

  ctx.fillText('original',10,30);
  ctx.drawImage(img,spriteX,spriteY,spriteW,spriteH,10,30,spriteW,spriteH);

  ctx.fillText('flipped',150,30);
  flipSpriteHorizontally(img,150,30, spriteX,spriteY,spriteW,spriteH);

}

function flipSpriteHorizontally(img,x,y,spriteX,spriteY,spriteW,spriteH){
  // move to x + img's width
  // adding img.width is necessary because we're flipping from
  //     the right side of the img so after flipping it's still
  //     at [x,y]
  ctx.translate(x+spriteW,y);

  // scaleX by -1; this "trick" flips horizontally
  ctx.scale(-1,1);

  // draw the img
  // no need for x,y since we've already translated
  ctx.drawImage(img,
                spriteX,spriteY,spriteW,spriteH,0,0,spriteW,spriteH
               );

  // always clean up -- reset transformations to default
  ctx.setTransform(1,0,0,1,0,0);
}

#canvas{border:1px solid red; margin:0 auto; }

<h4>Drawing & horizontally flipping a sprite</h4>
<canvas id="canvas" width=300 height=100></canvas>
<h4>Spritesheet:</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg'>

- markE

---

它隐藏了我的图片，我该怎么办？ - Trke Rap

哦，抱歉我不是想移除它们中的两个。我有六张图片在一个画布上，我想翻转（镜像）其中的两张。我尝试了缩放和设置变换，但是这两种方法都隐藏了我的两张图片。 - Trke Rap

抱歉我的英语不好:( - Trke Rap

是的，我确实想要那个。 - Trke Rap

哦，它可以工作，但我该如何设置画布目标，在画布上绘制图像？ - Trke Rap

Answer 2

镜像图像

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

// arguments
// ctx : the context on which to draw the mirrored image
// image : the image to mirror
// x,y : the top left of the rendered image
// horizontal : boolean if true mirror along X
// vertical : boolean if true mirror along y
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

更多镜像

如果您希望能够沿任意线进行镜像，请参考答案沿线镜像

- Blindman67

---

太棒了！谢谢！我正在寻找这个！ :) - Muhammad bin Yusrat

Answer 3

要进行镜像图像，可以使用带有负比例的setTransform。

context.setTransform(-1, 0, 0, 1, 0, 0);    //Now all images will be horizontally mirrored
context.drawImage(<myimage>, srcx, srcy, srcw, srch, dstx, dsty, dstw, dsth);

别忘了在完成后恢复变换。

context.setTransform(1, 0, 0, 1, 0, 0);

- weaknespase

---

阅读此链接：https://dev59.com/umsz5IYBdhLWcg3wADS6 - weaknespase

Answer 4

function mirrorImage(image, src_x, src_y, img_width, img_height, x, y){

   // 1. MIRROR THE CONTEXT
   context.scale(-1, 1);

   // 2. DRAW IN CANVAS USING (-X - img_width)
   context.drawImage(image, src_x, src_y, img_width, img_height, - 
   x - img_width, y, img_width, img_height);

   // 3. RETURN CONTEXT TO ORIGINAL STATE (AFTER DRAWING)
   context.scale(-1, 1);

}

- Fethi Kara