2

在 Chrome 中使用 HTML 画布时，为什么我这样做会获得更好的图像质量：

 ctx.scale(0.5, 0.5);
 ctx.drawImage(image, 10,10);
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 ctx.scale(0.5, 0.5);
 ctx.drawImage(image, 10,10);

代替：

ctx.scale(0.25, 0.25);
ctx.drawImage(image, 10,10);

换句话说，如果我将图像缩小到 50%，而不是直接缩小到 25%，我会获得更好的质量。在 Chrome 中，当我分两步缩放文本时，文本变得不那么模糊（我正在渲染主要由文本组成的大型 PNG）。

画布定义为：

<canvas id="canvas" width="2600" height="2400"></canvas>

图像是：

var image = new Image();
image.src = "myimage.png";

隔离：

我已经在 Chrome、Firefox、Edge 和 IE 中尝试过这个。更高的图像质量只能在 Chrome 中看到。我已经看到了许多其他关于如何提高图像质量的变体（在 StackOverflow 上进行了描述），但是我们有一个相当大的代码库，并且引入一些其他选项需要对我们的渲染器进行更多的重新设计。

背景：

我正在开发一个呈现大图像（3000x3000 像素）的网络应用程序。该应用程序允许用户放大/缩小、平移和标记图像中的对象。

我猜测分两步缩放会使代码在 Chrome 中使用一些优化，但我不确定这是否是获得更好图像质量的可靠方法。

4

0 回答 0