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

发布于 2024-08-06 20:04:53 字数 750 浏览 6 评论 0原文

我对 context2d 的drawImage 函数有疑问。每当我缩放图像时，它都会出现一个像素的黑色边框，这有点难看。这种情况只发生在 Firefox 中，而不会发生在 Opera 或 Webkit 中。

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

我用这个最小的片段重现了这种效果，假设 exp.jpg 的大小为 200x200 像素。

<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>

原文

I have a problem with the context2d's drawImage function. Whenever I scale an image, it gets a dark border of one pixel, which is kind of ugly. That does only happen in Firefox, not in Opera or Webkit.

Is this an antialiasing problem? For hours I studied the examples and available documentation without getting rid of it... I couldn't yet try it on another computer so maybe just maybe it's an issue with the graphics hardware/drivers.

I have reproduced this effect with this minimal snippet, assuming exp.jpg is sized 200x200 pixels.

<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>

分享到QQ

分享到微博