为什么此 Canvas 图像无法正确旋转?
当我单击旋转按钮时,图像会旋转,但会被奇怪地裁剪。我希望图像保持完整并简单地旋转。
重要提示:我不想旋转 div,我想旋转实际图像。
参见 fiddle : http://jsfiddle.net/8V4V7/2/
代码:
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);
最佳答案
这对我有用(我在 onload
函数中指定了 Canvas 的高度和宽度):
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);
};
}
关于javascript - 为什么此 Canvas 图像无法正确旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21744126/