Firefox 中的 Javascript/Canvas/Images 缩放问题答案

【问题标题】：Javascript/Canvas/Images scaling problem in FirefoxFirefox 中的 Javascript/Canvas/Images 缩放问题
【发布时间】：2009-10-10 06:35:35
【问题描述】：

我对 context2d 的 drawImage 函数有疑问。每当我缩放图像时，它都会得到一个像素的暗边框，这有点难看。这只发生在 Firefox 中，而不是 Opera 或 Webkit。

这是一个抗锯齿问题吗？几个小时以来，我一直在研究示例和可用文档，但没有摆脱它……我还不能在另一台计算机上尝试它，所以可能只是图形硬件/驱动程序的问题。

假设 exp.jpg 的大小为 200x200 像素，我已经用这个最小的 sn-p 重现了这种效果。

<html>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
   <script type="text/javascript" src="../../media/pinax/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" >
  context = $('#canvas')[0].getContext('2d');
  img = new Image();
  img.src = "exp.jpg";
  //while (!img.complete);
  context.drawImage(img, 2,2,199,199);
  context.drawImage(img, 199,2,199,199); 
</script>
</html>

【问题讨论】：

我试过这段代码，但没有看到任何黑色边框。这适用于 Windows 上的 Firefox 3.5.3。我认为如果您省略了 jquery 要求，人们会更容易对此进行测试。
是的，你是对的......我也忘了说我必须在Firefox中缩放页面以使效果清晰。但是，我正在使用它来绘制平铺图像，然后它变得非常烦人。但是感谢您的尝试。
你可以直接从 Google 获取 jQuery 以避免依赖问题：ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 我做了一个测试页面：boogdesign.com/examples/canvas/image.html 看起来不错，Linux 上的 FF 3.5.3：boogdesign.com/examples/canvas/Canvas_test_ff.png跨度>
为什么在正文之后有脚本标签？
浏览器将停止加载页面以加载它遇到的任何脚本。如果脚本是页面上的最后一件事（在正文之后），那么它们将不会阻止页面加载，并且您还可以确保您可能希望在脚本中访问的所有 DOM 对象都已加载。

标签： javascript firefox canvas image-scaling

【解决方案1】：

这是一个已知的 Firefox 错误：https://bugzilla.mozilla.org/show_bug.cgi?id=490997 这似乎是 X11/驱动程序的问题。

【讨论】：