Comment simuler CSS `background-size: cover` dans 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);
}

Cette fonction peut être invoquée comme suit :

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

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!