Повернуть изображение, загружаемое в плагин camanjs

Question

У меня есть изображение на моей веб-странице с некоторыми небольшими функциями редактирования. Одна из функций, которые я хочу иметь, - это поворот изображения на несколько градусов. Мой 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); 

в то время как изображение вращается, как это должно и в правильном положении, часть изображения должна быть отрезана, потому что полотно точно как размер изображения и при вращении изображения поэтому края, например, выходят за пределы холста, поэтому не показаны. Как я могу изменить это поведение ... Должен ли я всегда иметь более крупный холст, чем мой образ?

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, включая поиск максимальной границы для любого угла.