HTML Canvas imageSmoothingEnabled杀死Windows上的Chrome中的绘制图像

Question

我们使用画布绘制图像，并要求对图像进行平滑处理。  所以我们在2d Canvas上下文中使用了context.imageSmoothingEnabled。

我们注意到如果我们使用jpg并且平滑是真的，那么图像无法在某些机器（主要是Windows 64位）上正确缩放。

此外，如果smoothingQuality设置为'low'（而不是中等或高），那么它可以工作，但当然，谁想要低。

如果您修改代码以指向PNG文件，它似乎可以正常工作。

这是JS代码

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.imageSmoothingQuality = "medium";

	// set to true and the image fails to scale
	ctx.imageSmoothingEnabled = true;
  
ctx.drawImage(img, 0, 0, 50, 50);
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

body {
    background: #CEF;
}

<canvas id="c" width="800" height="600"></canvas>

提前致谢。

Answer 1

我在Win1 64bit，Win10 32Bit（64bitCPU）和Chrome Beta版上的Win10 32bit上尝试过它。金丝雀

不能重复你提到的问题。

图像格式（jpeg，png）不会影响任何平滑或质量设置的结果（除源图像质量外）。

什么可以产生影响，特别是在小尺度上，缩小图像与原始图像的比例。像1/2 1/4 1/8的比率将产生比1/3 2/9 3/19更好的结果。在比较不同尺寸的图像时，您应该以相同的比例比例而不是相同的尺寸进行比较（如果原始尺寸不同）

下面我使用了您的代码和您链接的图片，以相同的尺寸绘制图像。从左到右沿着顶部平滑，从左边的质量高到右边的低点。

第二行相同，但平滑关闭。

下面是相同但通过画布副本缩放，没有平滑显示设置所产生的差异的更多细节（如果有的话）。

如果你的问题概述了这是可重复的，那将是铬的一个主要问题，并将很快得到解决。我会说它是非常具体的东西，也许所有的显卡都是相同的类型，并且存在驱动程序问题，或者图像被缓存，并且出现了一些旧的坏版本。

如果您需要更多帮助，您可以做的最好的事情是提供一些问题的屏幕截图，显示问题和所需的结果。这样我们至少可以稍微缩小它。

＆＃13;

＆＃13;

var ctx = c.getContext('2d');
var img = new Image;
img.src = "http://i.imgur.com/gwlPu.jpg";
img.onload = function () {
    ctx.imageSmoothingQuality = "high";
    ctx.imageSmoothingEnabled = true;      
    ctx.drawImage(img, 0, 0,50,50);
    ctx.imageSmoothingQuality = "medium";
    ctx.drawImage(img, 60, 0,50,50);
    ctx.imageSmoothingQuality = "low";      
    ctx.drawImage(img, 120, 0,50,50);


    ctx.imageSmoothingQuality = "high";
    ctx.imageSmoothingEnabled = false;      
    ctx.drawImage(img, 0, 60,50,50);
    ctx.imageSmoothingQuality = "medium";      
    ctx.drawImage(img, 60, 60,50,50);
    ctx.imageSmoothingQuality = "low";      
    ctx.drawImage(img, 120, 60,50,50);
    

    ctx.imageSmoothingQuality = "low";  // turn off all filtering
    ctx.imageSmoothingEnabled = false;      
    ctx.drawImage(c,0,0,170,110,0,120,680,440)

}

＆＃13;

body {
    background: #CEF;
}

＆＃13;

<canvas id="c" width="800" height="600"></canvas>

＆＃13;

＆＃13;

＆＃13;

以下内容由OP user2739963

编辑

这是一个不能在机器上工作的屏幕截图（我们有很多这些）。