HTML5 Canvas 图像缩放问题

Posted 2023-03-13

【中文标题】HTML5 Canvas 图像缩放问题

【英文标题】：HTML5 Canvas Image Scaling Issue

【发布时间】：2012-05-18 12:00:54

【问题描述】：

我正在尝试在 html5 画布中制作像素艺术主题游戏，作为其中的一部分，我采用 10x20 左右大小的图像并使用以下代码将它们绘制到画布上：

ctx.drawImage(image, 20, 20, 100, 200);

但是，画布使用双三次图像缩放，因此像素艺术图像在 2 倍及以上时看起来很糟糕。有没有办法强制画布使用最近邻缩放或可能使用自定义方法来缩放图像？如果不是，这是否意味着必须事先在 Paint.net 中对图像进行缩放？

【参考方案1】：

选择以下任何一项：

---

通过 JavaScript：

ctx.imageSmoothingEnabled = false;

^{来源：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

在 Gecko 上，您需要

ctx.mozImageSmoothingEnabled = false;

^{来源：https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes}

在 Webkit 上，您需要

ctx.webkitImageSmoothingEnabled = false;

^{来源：https://bugs.webkit.org/show_bug.cgi?id=82804}

我找不到其他浏览器支持此属性的信息，所以他们可能不支持它。

---

通过 CSS：

另一种选择是在画布上使用一组 CSS 规则。例如：

<canvas id="c"  ></canvas>
<script>
  var c = document.getElementById("c"),
      cx = c.getContext("2d"),
      im = new Image();
  im.src = "http://***.com/favicon.ico"; // 16x16
  cx.drawImage(im, 0, 0);
</script>
<style>
  canvas 
    width: 32px;
    height: 32px;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  
</style>

^{来源：https://developer.mozilla.org/en/CSS/image-rendering来源：https://bugs.webkit.org/show_bug.cgi?id=56627}

---

通过像素例程：

另一种选择是自己使用画布像素操作例程：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation。不过，这还有很多工作要做。

【讨论】：

谢谢，这正是我所需要的。

多么完整的答案！

这是有意在 CSS 定义中使用宽度和高度为 200，而画布的原始尺寸为 100*100？

@SatyaKalluri：是的。如果您在 CSS 中设置 width,height:200px，在 HTML 中设置 width,，则画布中的每个“像素”在屏幕上显示为 2×2 像素。

你的 css 中遗漏了一些东西：image-rendering: -moz-crisp-edges 这就是你在 Firefox 上的做法。