Ottenere immagini sgradevoli mentre si simula la copertina in tela

Question

Sto provando a visualizzare l'immagine usando la simulazione cover su tela. Ho trovato alcuni interessanti answer su come farlo.

Il fatto è che quando lo faccio con un'immagine grande, viene visualizzato brutto. Come risolverlo?

Ecco la mia Codepen

HTML

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

CSS

canvas { 
     width: 100%; 
     height: 100vh; 
    } 

JS

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

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); 
    //drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height, 0.5, 0.5); 
} 

/** 
* 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

Per fare ciò, è possibile utilizzare diverse tecniche come HTML/CSS, Solo CSS, Jquery o JS/Canvas. Per ulteriori informazioni su questo look here.

Sì non impostare la larghezza e l'altezza della tela in HTML come menzionato da David Skx. Devi cancellare il tuo CSS, rimuoverlo completamente.

Nei tuoi JS si dovrebbe impostare la dimensione della tela (basta definire in 1 posto, non lasciate diverse lingue interferiscono):

var canvas = document.getElementById('canvas'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

Finestra significa l'intero browser, utilizzano pixel qui se si vuole limitarlo solo a una tela e non all'intero sfondo

Questo è tutto.

Answer 2

è necessario specificare la larghezza e l'altezza in pixel direttamente sul <canvas> -Element, altrimenti sarà distorcere:

<canvas id="canvas" width="500" height="500"></canvas> 

Usa JavaScript per misurare la larghezza della finestra e l'altezza e impostare in modo dinamico. Qualcosa di simile:

var canvas = document.getElementById('canvas'); 
canvas.setAttribute('width', window.innerWidth); 
canvas.setAttribute('height', window.innerHeight); 

UPDATE: Come Matthijs van Hest ha sottolineato, la larghezza e l'altezza attributi sul <canvas> -element sono solo opzionale.