CanvasRenderingContext2D翻转转换

Question

我找到了this CanvasRenderingContext2D，我玩了一下它。我能够使用此上下文缩放和旋转我的图像：

crop: function() { 
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 

    canvas.width = this.options.width/this.scale; 
    canvas.height = this.options.height/this.scale; 

    var currWidth = this.imgWidth * this.scale; 
    var currHeight = this.imgHeight * this.scale; 
    var correctX = (currWidth - this.imgWidth)/2; 
    var correctY = (currHeight - this.imgHeight)/2; 
    var sourceX = (this.posX - correctX)/this.scale; 
    var sourceY = (this.posY - correctY)/this.scale; 

    context.translate(sourceX, sourceY); 
    context.translate(this.imgWidth/2, this.imgHeight/2); 
    context.rotate(this.rotate * Math.PI/180); 
    context.drawImage(this.imgFull, this.imgWidth/2 * -1, this.imgHeight/2 * -1); 

    this.options.modal.remove(); 
    this.promise.resolve(canvas); 
}, 

不幸的是，我找不到任何垂直或水平翻转画布的功能。在代码中，我认为我可以这样做：

if(self.flipV) { 
    context.rotateY(180); 
} 

if(self.flipH) { 
    context.rotateX(180); 
} 

但我找不到任何方法在y轴或x轴上旋转。 有什么方法可以在这里执行我的翻转转换？

Answer 1

虽然不是很明显，你可以翻转使用context.scale方法。

水平翻转context.scale(-1,1)并垂直翻转context.scale(1,-1)。

就像旋转一样，在执行context.scale之前，您必须使用context.translate来设置旋转点。

这里的示例代码和一个演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

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

 
    // original 
 
    ctx.drawImage(img,200,200); 
 

 
    // horizontal flip 
 
    ctx.translate(200,0); 
 
    ctx.scale(-1,1); 
 
    ctx.drawImage(img,0,200); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 

 
    // vertical flip 
 
    ctx.translate(0,200); 
 
    ctx.scale(1,-1); 
 
    ctx.drawImage(img,200,0); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 

 
    // labels 
 
    ctx.font='18px verdana'; 
 
    ctx.textAlign='center'; 
 
    ctx.fillText('Original',275,375); 
 
    ctx.fillText('scale(-1,1)',125,375); 
 
    ctx.fillText('Horizontal Flip',125,395); 
 
    ctx.fillText('scale(1,-1)',275,20); 
 
    ctx.fillText('Vertical Flip',275,40); 
 
}

<canvas id="canvas" width=400 height=425></canvas> 
 

 

Answer 2

我不知道这是你在找什么，但你可以反映使用CSS的图像。我有这个在我的项目之一：

<style> 
.image-reflect { 
    transform: scaleX(-1); 
} 
</style> 
. 
. 
. 
<span class="fa fa-share-alt image-reflect"></span> 

展现FontAwesome share icon为“合并”图标。

其实，如果你看看“CSS变换”，你会发现它可以旋转，缩放，移动，倾斜等

Answer 3

镜经由CanvasRenderingContext2D

图像0​​

下面是一个简单的工具的功能，将水平镜像的图像，垂直或两者。

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 

更多镜子

如果您希望能够沿着任意线路镜一看便知Mirror along line