Javascript 画布图像质量问题

我试图在画布中模拟

背景大小：cover

属性。我让它工作了，但质量不好

这里有一个。您可以比较这两个图像（缩小以便可以看到两个图像相邻）：

我的代码如下所示：

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

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

同样，对于cordinates，

parseInt（x）

和

parseInt（x）+0.5

也没有解决问题

---

*此问题被标记为

nodejs

，因为我在nodejs中与节点画布模块一起使用此代码。

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

ctx.imageSmoothingEnabled = false;

---

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

这里有一些好信息-使用parseInt和parseInt+0.5进行了尝试，质量仍然不好：我怀疑您的数学中存在一些舍入误差，这会导致模糊。画布在调整图像大小时通常使用双线性插值，而图像元素通常使用双三次插值，从而产生更好的结果。尝试在结果中添加一个锐化器卷积以使其锐化（参见f.ex.this:）。Ps.来自SO的代码必须归属于。。

ctx.imageSmoothingEnabled = false;