-1

在我的项目中，我有一个画布 (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>
4

1 回答 1

3

原因

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

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

解决方案

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

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

由于获得新大小的操作总和，花费在 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);
}

演示（概念验证）

在线演示在这里

结果将是：

结果快照
左图：IMG 元素。右图：画布两步（在 Firefox 中渲染）

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

于 2013-09-01T06:39:57.980 回答