Erhalten hässliches Bild beim Simulieren der Abdeckung in Leinwand

Question

Ich versuche, das Bild mit cover Simulation in Leinwand anzuzeigen. Ich habe ein paar coole answer gefunden, wie es geht.

Die Sache ist, wenn ich es mit einem großen Bild mache, wird es hässlich angezeigt. Wie behebt man das?

Hier ist mein 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

Um dies zu erreichen, können Sie verschiedene Techniken wie HTML/CSS, Nur CSS, JQuery oder JS/Canvas verwenden. Für mehr zu diesem look here.

Sie tun nicht müssen Sie die Breite und Höhe der Leinwand in HTML wie David Skx erwähnt. Sie müssen Ihr CSS löschen, entfernen Sie es vollständig.

In Ihrem JS Sie Ihre Leinwandgröße (nur definiert es in 1 Platz lassen, nicht verschiedene Sprachen stören) setzen sollen

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

Fenster den ganzen Browser, Verwenden Pixel hier, wenn Sie wollen Begrenzen Sie es auf nur eine Leinwand und nicht den ganzen Hintergrund

Das ist alles.

Answer 2

Sie haben die Breite und Höhe in Pixel auf dem <canvas> -Richtcharakteristik direkt angeben, sonst wird es sie verzerren:

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

Verwenden JavaScript, um die Fensterbreite und Höhe und legen Sie es dynamisch zu messen. Etwas wie:

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

UPDATE: Wie Matthijs van Hest wies darauf hin, die Breite und Höhe auf der <canvas> -elementigen Attribute sind nur optional.