画布图像旋转，动态画布调整大小 - 图像被裁剪

Question

我通过使用canvas rotate（）函数拖动来旋转图像。显然，在旋转过程中图像会被切断。

为了解决这个问题，我遵循了一些stackoverflow instructions并实现了类似的内容：

//Resizing Canvas - this part is creating problem
var w = imgW;
var h = imgH;

var newWidth,newHeight;
var c = Math.cos(15*rot*0.0174532925);
var s = Math.sin(15*rot*0.0174532925);

if (s < 0) { s = -s; }
if (c < 0) { c = -c; }
newWidth = h * s + w * c;
newHeight = h * c + w * s ;

cnv2.width = newWidth;
cnv2.height= newHeight;

translateX = cnv2.width/axisFactor;
translateY = cnv2.height/axisFactor
ctx2.clearRect(0,0,cnv2.width,cnv2.height);
ctx2.save();
ctx2.translate(translateX,translateY);
ctx2.rotate(15*rot*0.0174532925);
ctx2.drawImage(img,-translateX,-translateY);
ctx2.restore();

虽然我能够获得正确尺寸的画布，但图像的重绘仍然会被剪切。

我错过了什么？

继承人：http://jsfiddle.net/anubhabB/wwas5jag/

编辑：通过纠正解决了问题     

ctx2.drawImage(img,-translateX,-translateY);

带

ctx2.drawImage(img,-img.width/axisFactor,-img.height/axisFactor);

但这不适用于任何不是图像1/2的轴，比如轴因子3！

如何解决这个问题？

Answer 1

下面的评论是关于我的第一次编辑，这不是OP希望解决的问题。

修改 我误解了这个问题并提供了一些不太好的解决方案。新尝试：

这个小提琴将画布重新调整为自由旋转图像所需的最大宽度/高度，而不会剪裁。画布只重新调整一次。旋转轴位于画布的中心，图像移动到coinide，旋转轴位于axisFactor的点。

我希望这可以完全或部分解决您的问题。

http://jsfiddle.net/Niddro/wwas5jag/8/

var cntx = document.getElementById('cnvSampl').getContext('2d');
cntx.fillStyle = '#fc0';
cntx.fillRect(0,0,95,95);
var canv = document.getElementById('cnv');
var ctx  = canv.getContext('2d');
var canv2= document.getElementById('cnv2');
var ctx2  = canv2.getContext('2d');

var img = new Image();
var imgW, imgH;
var translateX, translateY;
var axisFactor = 5;
var newCanvasSize;
var rot = 0;

function rotate(){
    rot++;
    //This is without resize
    translateX = cnv.width/axisFactor;
    translateY = cnv.height/axisFactor
    ctx.clearRect(0,0,imgW,imgH);
    ctx.save();
    ctx.translate(translateX,translateY);
    ctx.rotate(15*rot*0.0174532925);
    ctx.drawImage(img,-translateX,-translateY);
    ctx.restore();
    //Resizing Canvas - this part is creating problem
    var w = imgW;
    var h = imgH;
    
    var newWidth,newHeight;
    var c = Math.cos(15*rot*0.0174532925);
    var s = Math.sin(15*rot*0.0174532925);
    
    if (s < 0) { s = -s; }
    if (c < 0) { c = -c; }
    newWidth = h * s + w * c;
    newHeight = h * c + w * s ;
    
    cnv2.width = newCanvasSize*2;
    cnv2.height= newCanvasSize*2;
    
    translateX = cnv2.width/2;
    translateY = cnv2.height/2;
    ctx2.clearRect(0,0,cnv2.width,cnv2.height);
    ctx2.save();
    ctx2.translate(translateX,translateY);
    ctx2.rotate(15*rot*0.0174532925);
    ctx2.drawImage(img,-img.width/axisFactor,-img.height/axisFactor);
    ctx2.restore();
}

function init(){
    img.onload = function(){
        imgW = img.width;
        imgH = img.height;
        ctx.drawImage(img,0,0,imgW,imgH);
        ctx2.drawImage(img,0,0,imgW,imgH);
        newCanvasSize = Math.sqrt(Math.pow(img.width,2)+Math.pow(img.height,2))*(1-1/axisFactor);
    }
    img.src = document.getElementById('cnvSampl').toDataURL();
    document.getElementById('rotate').onclick = function(){
         rotate(); 
    };
}
init();

#cnv,#cnv2{
    border:1px solid #ccc
}

<button id="rotate">Rotate 15deg</button><br />
<canvas width="95" height="95" id="cnv"></canvas>
<canvas width="95" height="95" id="cnv2"></canvas>

<canvas width="95" height="95" id="cnvSampl" hidden></canvas>