为什么此画布图像不能正确旋转？javascript - 为什么此画布图像不能正确旋转？

当我点击旋转按钮的图像旋转，但得到奇怪的裁剪。我希望图像保持完整，并简单地旋转。

重要提示：我不想旋转div，我正在旋转实际图像。

代码：

function rotateBase64Image(base64data, callback) { 
    console.log("what we get: " + base64data); 

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

    var image = new Image(); 
    image.src = base64data; 
    image.onload = function() { 
     ctx.translate(image.width, image.height); 
     ctx.rotate(Math.PI); 
     ctx.drawImage(image, 0, 0); 
     callback(canvas.toDataURL()); 
    }; 
}

编辑： 我需要像90度的每次点击旋转。

我尝试以下，但它不工作：

ctx.rotate(Math.PI/2);

来源

2014-02-13 quelquecosa

不要犹豫，问，如果我的代码没有意义或者你想让它不工作。 –

@DanielLisik谢谢。请检查编辑？ – quelquecosa

这为我工作（我指定的onload函数内部高度和画布的宽度）：

function rotateBase64Image(base64data, callback) { 
    console.log("what we get: " + base64data); 

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

    var image = new Image(); 
    image.src = base64data; 
    image.onload = function() { 

     canvas.height = image.height; 
     canvas.width = image.width; 

     ctx.translate(image.width, image.height); 
     ctx.rotate(Math.PI); 
     ctx.drawImage(image, 0, 0); 
     callback(canvas.toDataURL()); 
    }; 
}

编辑

更新了每次点击旋转90度的功能（删除i*Math.PI中的i旋转90度只有一次）

var i = 0; 
function rotateBase64Image(base64data, callback) { 
    console.log("what we get: " + base64data); 

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

    var image = new Image(); 
    image.src = base64data; 
    image.onload = function() { 
     canvas.width = image.height; 
     canvas.height = image.width; 

     ctx.translate(canvas.width/2, canvas.height/2); 
     i++; 
     ctx.rotate(i*Math.PI/2); 
     ctx.translate(-canvas.width/2, -canvas.height/2); 

     ctx.drawImage(image, 0, 0); 

    }; 
}

Updated Fiddle

来源

2014-02-13 02:44:18

您是否删除了答案？它没有弹出之前，我张贴我的... – user13500

@ user13500是的，我犹豫了，并想在jsFiddle上尝试它。你可以看到我从整个开始就有相同的代码。 –

@DanielLisik这个作品，谢谢。你能让它旋转90度而不是180度吗？那么它是你的。 – quelquecosa

只是为了轮换一些辅助信息，上下文特别是储蓄，以及如何围绕图像的中心旋转。

var context = canvas.getContext('2d'); 
//save the context 
//pushes a Matrix on the transformation stack 
context.save(); 
context.translate(x, y); //where to put image 
context.rotate(angle); //angle in degrees (i think...) 
context.scale(scale); //optional scale 
//rotate around center of image 
context.drawImage(bitmap, -image.width/2, -image.height/2); 
//or rotate around top left corner of image 
context.drawImage(image, 0, 0); 
//restore the canvas 
//pop a matrix off the transformation stack 
context.restore();

参考文献：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/

来源

2014-09-12 16:12:43 mattdlockyer

javascript - 为什么此画布图像不能正确旋转？

回答

编辑

相关问题