Maison > interface Web > tutoriel CSS > Comment simuler CSS `background-size: cover` dans Canvas ?

Comment simuler CSS `background-size: cover` dans Canvas ?

Barbara Streisand
Libérer: 2024-12-14 20:35:16
original
236 Les gens l'ont consulté

How to Simulate CSS `background-size: cover` in Canvas?

Simulation de la taille de l'arrière-plan CSS : couverture dans Canvas

Le dessin sur toile implique le rendu d'images dans un contexte 2D. Cependant, lorsque vous dessinez des images à l'aide de la méthode drawImage(), il est possible de rencontrer des problèmes d'étirement ou de distorsion de l'image. Ce problème peut être résolu en simulant la propriété CSS background-size: cover, qui redimensionne l'image tout en préservant ses proportions pour l'adapter aux dimensions souhaitées.

Une méthode pour obtenir ce comportement dans Canvas consiste à utiliser la fonction suivante. :

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);
}
Copier après la connexion

Cette fonction peut être invoquée comme suit :

drawImageProp(ctx, image, 0, 0, width, height);
Copier après la connexion

Cela mettra l'image à l'échelle proportionnellement pour l'adapter aux dimensions de largeur et de hauteur fournies. Les paramètres facultatifs offsetX et offsetY permettent le décalage de l'image dans le rectangle de destination.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal