在画布元素中模仿 background-size:cover

Question

我有一个固定大小的画布元素。我想在画布中设置一个背景图像，它占据画布的整个高度和宽度，但图像保持它的纵横比。由于图像和画布的纵横比不同，显然会有一些剪辑或图像的某些部分不可见。当我处理 div 时，这很简单——我可以设置 background-size:cover。

如何使用画布元素实现相同的效果，大概是使用 context.drawImage。

context.drawImage(image, 0, 0);

这是一个小提琴，它显示了我想要发生的事情以及当我尝试使用 css 执行此操作时发生的事情：http://jsfiddle.net/66Xfd/1/

有关背景大小的信息：如果需要，可以覆盖 - https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 1

我创建了这个功能，当时有点让人头疼。但无论如何，按照您的要求，按比例缩放目标矩形内的图像以填充整个空间。

/**
 * By Ken Fyrstenberg
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
*/
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    /// default offset is center
    offsetX = offsetX ? offsetX : 0.5;
    offsetY = offsetY ? offsetY : 0.5;

    /// keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;

    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   /// new prop. width
        nh = ih * r,   /// new prop. height
        cx, cy, cw, ch, ar = 1;

    /// decide which gap to fill    
    if (nw < w) ar = w / nw;
    if (nh < h) ar = h / nh;
    nw *= ar;
    nh *= ar;

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

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

    /// make sure source rectangle is valid
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    /// fill image in dest. rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}