Question

我的网页上有一个图像，只有一些编辑功能。我想要的功能之一是旋转Image一定程度。我的HTML看起来像这样

<img src="path/to/image" id="myimage">

js file

$(document).ready(function (){
    caman = Caman("#myimage");
);

我想旋转我的图像。所以我尝试执行以下命令

image = new Image();
image.src = caman.canvas.toDataURL(); //to get the image src
canvas = caman.canvas; //to get caman's canvas
ctx = caman.context;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(10*Math.PI/180) //10 degrees clockwise correct?
ctx.drawImage(image, image.width/-2, image.height/-2);

当图像按原样旋转并且处于正确位置时，一些图像被切断，因为画布与图像的大小完全一致，并且当图像旋转时，例如在画布之外，因此未显示。如何更改此行为...我应该总是拥有比我的图像更大的画布吗？

Answer 1

是的，你需要调整画布的大小，以便旋转的图像适合它。

这样做的一种方法是找到这样的界限：

function getBounds(w, h, radians){

    var a = Math.abs(Math.cos(radians)),
        b = Math.abs(Math.sin(radians));

    return {h: h * a + w * b,
            w: h * b + w * a}
}

现在，您将获得画布所需的边界或大小，以使图像适合该特定角度。我已经写了一些关于finding bounds in this article的更多内容，包括找到任何角度的最大界限。

旋转在camanjs插件中加载的图像

1 个答案: