Question

我正在尝试在画布中模拟background-size: cover属性。我得到了它的工作，但质量很差。

这是fiddle 。您可以比较两个图像（缩小以便您可以看到彼此相邻的两个图像）：

我的代码如下：

function drawImageProp(ctx, img, x, y, w, h, offsetY) {
    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        newW = iw * r,
        newH = ih * r,
        cx, cy, cw, ch, ar = 1;

    if (newW < w) ar = w / newW;
    if (newH < h) ar = h / newH;
    newW *= ar;
    newH *= ar;

    cw = iw / (newW / w);
    ch = ih / (newH / h);

    cy = -parseInt(offsetY) * ih / newH;

    ctx.patternQuality = 'best';
    ctx.antialias = 'default';
    ctx.filter = 'default';

    ctx.drawImage(img, 0, cy, cw, ch, x, y, w, h);

我尝试过添加

ctx.patternQuality = 'best';
ctx.antialias = 'default';
ctx.filter = 'default';

为了提高质量，但我仍然没有得到足够的优质。是否可以在画布中使用原始质量图像。

同时parseInt(x)和parseInt(x) + 0.5给了坐标，但没有解决问题。

* 这个问题用nodejs标记，因为我在nodejs中使用了带有node-canvas模块的代码。

Answer 1

尝试在上下文中将imageSmoothingEnabled属性设置为false：

ctx.imageSmoothingEnabled = false;

默认情况下，缩放时使用双线性滤镜的画布。它很模糊。您可能需要最近邻滤波，这只是一个像素重复。

画布图像质量问题

1 个答案: