캔버스에서 CSS `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?

CSS 배경 크기 시뮬레이션: 캔버스의 표지

캔버스 그리기에는 2D 컨텍스트에서 이미지를 렌더링하는 작업이 포함됩니다. 그러나 drawImage() 메서드를 사용하여 이미지를 그릴 때 이미지가 늘어나거나 왜곡되는 문제가 발생할 수 있습니다. 이 문제는 원하는 크기에 맞게 가로 세로 비율을 유지하면서 이미지 크기를 조정하는 CSS 속성 background-size:cover를 시뮬레이션하여 해결할 수 있습니다.

캔버스에서 이 동작을 달성하는 한 가지 방법은 다음 함수를 사용하는 것입니다. :

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);
}

이 기능은 다음과 같이 호출할 수 있습니다.

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

이미지 크기가 비례적으로 조정됩니다. 제공된 너비 및 높이 치수. 선택적 offsetX 및 offsetY 매개변수를 사용하면 대상 직사각형 내에서 이미지 오프셋을 허용할 수 있습니다.

위 내용은 캔버스에서 CSS `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!