Heim > Web-Frontend > CSS-Tutorial > Wie simuliere ich CSS „background-size: cover' in Canvas?

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

Barbara Streisand
Freigeben: 2024-12-14 20:35:16
Original
237 Leute haben es durchsucht

How to Simulate 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);
}
Nach dem Login kopieren

Diese Funktion kann wie folgt aufgerufen werden:

drawImageProp(ctx, image, 0, 0, width, height);
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage