在缩放图像后调整画布大小

Question

我想缩放已经被绘制到canvas中的图像。我使用this answer 在canvas中绘制/旋转图像。此示例对我很好，并且正确调整了Canvas的大小。我想要使用缩放（ZoomIn/ZoomOut）图像工作正常，但画布无法正确调整大小。 我想在缩放后根据图像大小调整画布大小。 下面是示例代码http://jsfiddle.net/6ZsCz/97/

var zoomDelta = 0.1; 
var currentScale = 1; 
var ctx = canvas.getContext("2d"); 
var imgWidth; 
var imgHeight; 
var size = {}; 
var rotation = 0; 
img = new Image(); 
img.onload = function() { 
    rotation = 0; 
    imgWidth = img.width; 
    imgHeight = img.height; 
    size = { 
     width: imgWidth, 
     height: imgHeight 
    }; 
    draw(); 
    newSize(imgWidth, imgHeight, rotation); 
}; 

$("#zoomOut").click(function() { 
    currentScale -= zoomDelta; 
    draw(); 
    newSize(imgWidth/currentScale, imgHeight/currentScale, rotation); 
}); 

    function draw() { 
    canvas.width = size.width; 
    canvas.height = size.height; 
    var cx = canvas.width/2; 
    var cy = canvas.height/2; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.translate(cx, cy); 
    ctx.scale(currentScale, currentScale); 
    ctx.rotate(rotation * deg2Rad); 
    ctx.drawImage(img, (-imgWidth/2) , (-imgHeight/2)); 
} 
function newSize(w, h, a) { 
    var rads = a * Math.PI/180; 
    var c = Math.cos(rads); 
    var s = Math.sin(rads); 
    if (s < 0) { 
     s = -s; 
    } 
    if (c < 0) { 
     c = -c; 
    } 
    size.width = (h * s + w * c) ; 
    size.height = (h * c + w * s); 

} 

Answer 1

您可以通过您的currentScale画布大小乘以调整画布，然后规模：

canvas.width = size.width*currentScale; 
canvas.height = size.height*currentScale;