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

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

<img src="path/to/image" id="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);

---

当图像按其应旋转且处于正确位置时，一些图像会被切断，因为画布与图像的大小完全相同，并且当图像旋转边缘时（例如，超出画布），因此不会显示。我该如何改变这种行为……我的画布是否应该总是比我的图像大？

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

一种方法是找到如下边界：

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

现在，您将拥有画布所需的边界或大小，以便图像以特定角度装入画布。我已经写了更多关于寻找任意角度的max-bound的内容

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