Wie simuliere ich CSS „background-size: cover' in Canvas?

Simulieren der CSS-Hintergrundgröße: Cover in Canvas

Beim Canvas-Zeichnen geht es um das Rendern von Bildern in einem 2D-Kontext. Beim Zeichnen von Bildern mit der Methode drawImage() können jedoch Probleme mit der Bilddehnung oder -verzerrung auftreten. Dies kann durch Simulieren der CSS-Eigenschaft „background-size: cover“ behoben werden, die das Bild unter Beibehaltung seines Seitenverhältnisses skaliert, damit es in die gewünschten Abmessungen passt.

Eine Methode, dieses Verhalten in Canvas zu erreichen, ist die folgende Funktion :

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    // Default arguments and validation
    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // Image dimensions and aspect ratio
    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // New proposed width
        nh = ih * r,   // New proposed height
        cx, cy, cw, ch, ar = 1;

    // Determine image scaling factor
    if (nw < w) ar = w / nw;                             
    if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh;  // Updated

    nw *= ar;
    nh *= ar;

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

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

    // Validate source rectangle
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // Draw the image to the destination rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}

Diese Funktion kann wie folgt aufgerufen werden:

drawImageProp(ctx, image, 0, 0, width, height);

Dadurch wird das Bild proportional skaliert, damit es in die angegebene Breite und Höhe passt Abmessungen. Die optionalen Parameter offsetX und offsetY ermöglichen einen Bildversatz innerhalb des Zielrechtecks.

Das obige ist der detaillierte Inhalt vonWie simuliere ich CSS „background-size: cover' in Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!