canvas drawImage质量 [英] canvas drawImage quality

问题描述

这是一个.png图像（在右边），和我绘制图像的画布元素（在左边）。你能注意到质量差异吗？ Canvas渲染图像时会出现明显的质量损失。我们能做些什么？

我在Chrome和IE9上观察到这个结果。其他人也许会做同样的事情。
如何渲染图像是很常见的：在脚本中，我创建一个新的 Image（）对象，加载后调用

context.drawImage（myimage，x，y）;

编辑：

这是我在画布上观察到的初始图片：

这是我写了之后画布呈现的内容：

context.drawImage（myimage，parseInt（x），parseInt（y））;

我能说什么， Sharpshooting在它的最好。

我尝试过<$ p>


$ b

EDIT2 c $ c> context.drawImage（myimage，parseInt（x）+ 0.5，parseInt（y）+0.5）; ，这里是结果：

我认为它比第一个更糟糕。我在Chrome上观察到了这个问题，在IE9上它和坏的一样。

解决方案

中和彼此。
它没有工作，我有边缘的困难。

请检查您的坐标 x，y 是否为整数。
在这里使用浮点数可能会模糊你的图像，因为一些实现尝试渲染它像素之间

  context.drawImage（myimage，parseInt（x），parseInt（y））; 
  

如果这也无效，请尝试使用整数值+ 0.5

我知道对于OpenGL实现，你必须使用0.5的坐标，以便到达一个像素的中心。

  context.drawImage（myimage，parseInt（x）+0.5，parseInt（y）+0.5）; 
  

---

编辑：

请在Html5Rocks上查看此页！ p>

Here is a .png image (on the right), and the canvas element which I drew the image on (on the left). Can you notice the quality difference? Canvas renders the image with noticeable quality loss. What can we do?

I observed this result on Chrome and IE9. Others will probably do the same thing. How I render the image is quite usual: In the script I create a new Image() object, after it's loaded I call
context.drawImage(myimage, x, y);

EDIT:

This is the initial image i observed on the canvas:

And here's what the canvas renders after I wrote:
context.drawImage(myimage,parseInt(x),parseInt(y));

What can I say, great answer man. Sharpshooting at its best. The hat is off to you.

EDIT2:

I tried context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);, here's the result:

I think it's worse than the first one. I observed this on chrome, on IE9 it's somewhat same as bad.

解决方案

I just created an overlay of both images so that they neutralise each other. It didn't work, I had difficulties with edges.

Please check if your coordinates x, y are integers. Using floating point number here might blur your image as some implementations try to render it "between the pixels"

context.drawImage(myimage, parseInt(x), parseInt(y));

If this doesn't work either, try to use the integer value + 0.5
I know that for OpenGL implementations, you have to use coordinates with 0.5 in order to hit the center of a pixel.

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5);

---

EDIT:

Check out this page on Html5Rocks!

这篇关于canvas drawImage质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！