1

我的网页上有一张带有一些小编辑功能的图片。我想要的功能之一是将图像旋转一定程度。我的 html 看起来像这样

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

js文件

$(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);

虽然图像按应有的方式旋转并处于正确的位置，但由于画布与图像的大小完全相同，并且当图像旋转边缘时，例如转到画布外，因此某些图像会被截断，因此未显示。我怎样才能改变这种行为......我应该总是有一个比我的图像更大的画布吗？

4

1 回答 1

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}
}

现在，您将拥有画布所需的边界或大小，以使图像以该特定角度适合内部。我在这篇文章中写了更多关于寻找边界的内容，包括寻找任何角度的最大边界。

于 2013-12-19T13:07:12.030 回答