html5 canvas增加图像尺寸

Question

我正在寻找解决方案，以在较大的画布中显示较小的图像。想知道是否有一种方法可以在Safari浏览器和Chrome浏览器上的html5 canvas运行时中将图像大小提高100％而不会使其变形。

Answer 1

也许......

如果图像是基于矢量，将与小明显的失真大小的两倍。

如果小图像是高分辨率（例如300 dpi而不是传统的72dpi网页），那么您可以将尺寸加倍而几乎没有明显的失真。

否则......

尝试只是把在图像元素的图像，并具有浏览器的两倍。现代浏览器使用双三次插值并进行合理的缩放工作。

将图像带入Photoshop并在此处放大。试试Bicubic Smoother和Bicubic Sharper，看看哪个最适合您的特定图像。

如果这些都不适合您，请尝试通过缩放X 2来“欺骗”，然后应用轻微模糊来隐藏失真。一个有用的Gausian/Box模糊库是Quasimondo的stackblur：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html