javascript - 在小 Canvas 上绘制的大图像变得模糊

Question

在我的元素中，我有一个 Canvas (200*150)，我想绘制一个大小为 (800*600) 的图像。结果是图像变得更蓝(不平滑和不清晰)，但如果我们将该图像放在 img 标签上，它看起来不错。那么我们该如何处理呢？谢谢。

<img src="http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg"
width="200" heigh="150" />
<canvas id="my_canvas" width="200" height="150"></canvas>
<script type="text/javascript">
    window.onload = function () {
        var context = document.getElementById("my_canvas").getContext("2d");
        var image = new Image();
        image.src = "http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg";
        image.onload = function () {
            context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height); //dx-30, GY-28, GW+50, GH+35
        }
    }
</script>

Answer 1

原因

浏览器可以根据当前情况优先考虑质量或性能。

对于大多数页面而言，图像质量通常优先于性能。但是 Canvas 的性能不如直接浏览器渲染和 CSS，因此 Canvas 的插值可能会优先考虑性能而不是质量。取决于浏览器实现。

解决方案

幸运的是，有一种方法可以解决这个问题，方法是分两步(或更多步)或一个中间步骤来分担调整大小和插值的负担。

中间步骤首先将图像缩放 50% 到离屏 Canvas 。然后使用该 Canvas 绘制到最终尺寸。对于较大的图像，可能需要更多步骤。

由于获得新尺寸的操作总和，花费在 sum 上的时间大致相同(更简单地说:用中间步骤 x2 插值的时间更少，而插值 x1 的时间更多)所以你不会注意到太多性能降低。

但最重要的是:结果会比仅仅一步更好。

实现

这是实现中间步骤的方法:

image.onload = function () {

     /// create an extra step for re-sizing image
     var tmpCanvas = document.createElement('canvas'),
         tmpContext = c.getContext('2d');

     /// set this canvas to 50% of image
     tmpCanvas.width = image.width * 0.5;
     tmpCanvas.height = image.height * 0.5;

     /// draw image step 1
     tmpContext.drawImage(image, 0, 0, image.width * 0.5, image.height * 0.5);

     /// draw image step 2
     context.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
}

演示(概念验证)

ONLINE DEMO HERE

结果将是:

^{左图:IMG 元素。右图: Canvas 两步(在 Firefox 中呈现)}

如您所见，图像和 Canvas 元素之间现在没有明显区别。