如何在畫布中縮放圖像？

Question

我試圖在畫布中使用cover模擬顯示圖像。我發現了一些很酷的answer關於如何做到這一點。

到目前爲止，我的圖像根據屏幕分辨率而變化，但只有在刷新頁面後纔會發生變化。

我怎樣可以得到以下scaling effect無刷新頁面？ 嘗試調整窗口的大小。

HTML

<canvas id="canvas"></canvas> 

JS

var ctx = canvas.getContext('2d'), 
    img = new Image; 

canvas.setAttribute('width', window.innerWidth); 
canvas.setAttribute('height', window.innerHeight); 

img.onload = draw; 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg'; 

function draw() { 
    drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height); 
} 

/** 
* By Ken Fyrstenberg 
* 
* drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) 
* 
* If image and context are only arguments rectangle will equal canvas 
*/ 
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { 

    if (arguments.length === 2) { 
     x = y = 0; 
     w = ctx.canvas.width; 
     h = ctx.canvas.height; 
    } 

    /// default offset is center 
    offsetX = offsetX ? offsetX : 0.5; 
    offsetY = offsetY ? offsetY : 0.5; 

    /// keep bounds [0.0, 1.0] 
    if (offsetX < 0) offsetX = 0; 
    if (offsetY < 0) offsetY = 0; 
    if (offsetX > 1) offsetX = 1; 
    if (offsetY > 1) offsetY = 1; 

    var iw = img.width, 
     ih = img.height, 
     r = Math.min(w/iw, h/ih), 
     nw = iw * r, /// new prop. width 
     nh = ih * r, /// new prop. height 
     cx, cy, cw, ch, ar = 1; 

    /// decide which gap to fill  
    if (nw < w) ar = w/nw; 
    if (nh < h) ar = h/nh; 
    nw *= ar; 
    nh *= ar; 

    /// calc source rectangle 
    cw = iw/(nw/w); 
    ch = ih/(nh/h); 

    cx = (iw - cw) * offsetX; 
    cy = (ih - ch) * offsetY; 

    /// make sure source rectangle is valid 
    if (cx < 0) cx = 0; 
    if (cy < 0) cy = 0; 
    if (cw > iw) cw = iw; 
    if (ch > ih) ch = ih; 

    /// fill image in dest. rectangle 
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); 
} 

Answer 1

通話添加到draw在window resize event：

window.onresize = draw; 

這應該做的伎倆。

代替：

drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height); 

通行證img在draw功能：

drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height); 

然後，移動寬度/ heigth設置成draw功能，導致：

function draw() { 
    canvas.setAttribute('width', window.innerWidth); 
    canvas.setAttribute('height', window.innerHeight); 
    drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height); 
} 

您可能還想要重新啓動重新啓動，繪製位：

var timeOut; 
window.onresize = function(){ 
    if(timeOut) 
     clearTimeout(timeOut); 
    timeOut = setTimeout(draw, 10); 
} 

這防止draw函數被調用幾個每秒倍，而被調整大小的窗口。

這裏的a working example，從codepen分叉。

Answer 2

那麼這個工程。

http://codepen.io/anon/pen/KdRwVY

var ctx = canvas.getContext('2d'), 
 
    img = new Image; 
 

 
canvas.setAttribute('width', window.innerWidth); 
 
canvas.setAttribute('height', window.innerHeight); 
 

 
img.onload = draw; 
 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg'; 
 

 
function draw() { 
 
    drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height); 
 
} 
 
window.onresize = resize; 
 

 
function resize() { 
 
    canvas.setAttribute('width', window.innerWidth); 
 
    canvas.setAttribute('height', window.innerHeight); 
 
    draw() 
 
} 
 

 
/** 
 
* By Ken Fyrstenberg 
 
* 
 
* drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) 
 
* 
 
* If image and context are only arguments rectangle will equal canvas 
 
*/ 
 
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { 
 

 
    if (arguments.length === 2) { 
 
    x = y = 0; 
 
    w = ctx.canvas.width; 
 
    h = ctx.canvas.height; 
 
    } 
 

 
    /// default offset is center 
 
    offsetX = offsetX ? offsetX : 0.5; 
 
    offsetY = offsetY ? offsetY : 0.5; 
 

 
    /// keep bounds [0.0, 1.0] 
 
    if (offsetX < 0) offsetX = 0; 
 
    if (offsetY < 0) offsetY = 0; 
 
    if (offsetX > 1) offsetX = 1; 
 
    if (offsetY > 1) offsetY = 1; 
 

 
    var iw = img.width, 
 
    ih = img.height, 
 
    r = Math.min(w/iw, h/ih), 
 
    nw = iw * r, /// new prop. width 
 
    nh = ih * r, /// new prop. height 
 
    cx, cy, cw, ch, ar = 1; 
 

 
    /// decide which gap to fill  
 
    if (nw < w) ar = w/nw; 
 
    if (nh < h) ar = h/nh; 
 
    nw *= ar; 
 
    nh *= ar; 
 

 
    /// calc source rectangle 
 
    cw = iw/(nw/w); 
 
    ch = ih/(nh/h); 
 

 
    cx = (iw - cw) * offsetX; 
 
    cy = (ih - ch) * offsetY; 
 

 
    /// make sure source rectangle is valid 
 
    if (cx < 0) cx = 0; 
 
    if (cy < 0) cy = 0; 
 
    if (cw > iw) cw = iw; 
 
    if (ch > ih) ch = ih; 
 

 
    /// fill image in dest. rectangle 
 
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); 
 
}

<canvas id="canvas"></canvas>