画布图像质量问题答案

【问题标题】：Canvas image quality issue画布图像质量问题
【发布时间】：2014-04-12 14:43:22
【问题描述】：

我正在尝试在画布中模拟 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 模块。

【问题讨论】：

这里有一些很好的信息 - stackoverflow.com/questions/12946608/canvas-drawimage-quality
用 parseInt 和 parseInt + 0.5 都试过了，仍然没有得到很好的质量：jsfiddle.net/Kwd5L/5
我怀疑您的数学中存在一些舍入误差导致模糊。
Canvas 在调整图像大小时通常使用双线性插值，而图像元素通常使用产生更好结果的双三次。尝试在结果中添加一个锐化器卷积以使其锐化（参见 f.ex. this:stackoverflow.com/a/19235791/1693593）。附言。来自 SO 的代码必须归属于..

标签： javascript image node.js canvas html5-canvas

【解决方案1】：

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

ctx.imageSmoothingEnabled = false;

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

【讨论】：