质量差的png图像绘制到html画布 [英] Poor quality of png images drawn into html canvas

问题描述

我试图将png图像绘制到画布上，但质量真的很差。
我这样使用drawImage方法：

  src = folder + self.cur +。 
 imageObj.src = src; 
 imageObj.onload = function（）{
 context.clearRect（0，0，cv，ch），context.drawImage（imageObj，0，0，cv，ch）
}; 
  

附加的是原始图片和画布中结果的屏幕截图。现在画布尺寸与图像相同，所以问题不是由调整大小引起的。

任何想法是什么导致这个问题，以及如何解决呢？

然后绘制图像。如上所述，您的代码中还有一个拼写错误，如果您不调整图像大小，则无需指定宽度和高度。

后者可以帮助你调试这个问题 - 如果你把它们看出来，你会看到图像非常大，在这种情况下，表明画布没有适当的大小设置。

I am trying to draw png image into the canvas, but the quality is really poor. I am doing that using the drawImage method:

src = folder+self.cur+".png";
imageObj.src = src;
imageObj.onload = function() {
    context.clearRect(0, 0, cv, ch), context.drawImage(imageObj, 0, 0, cv, ch)
};

Attached is an original image and the screenshot of the result in the canvas. For now canvas dimensions are the same as the image, so the problem is not caused by the resizing.

Any ideas what is causing this issue and how to solve it? Here is a jfiddle with an example.

解决方案

Problem

The main error is that you do not specify the size for the canvas element - you are only specifying the CSS size for the element itself which means the canvas context will work with a default size of 300 x 150 pixels.

This leads to the image you're showing to be scaled down first to 300 x 150, then by CSS up to the size you intent (but aren't having) which creates the blurry look.

Solution

To fix you need to specifically set the size on the canvas element (in CSS pixels) and not use a CSS rule:

#mapCanvas{
    /*width:664px;  Delete these
    height:980px; */
}

And set them on the canvas element directly as properties and not as CSS:

<canvas id='mapCanvas' width=664 height=980></canvas>

You can optionally set them using JavaScript

 mapCanvas.width = 664;   /// use integer values
 mapCanvas.height = 980;

Modified working fiddle here

Then draw the image. As mentioned in the comment above there is also a typo in your code and if you don't re-size your image there is no need to specify width and height of it.

The latter could have helped you debug this problem - if you left them out you would have seen the image being draw very big in this case indicating that the canvas didn't have the proper size set.

这篇关于质量差的png图像绘制到html画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！