浏览器在使用CSS缩放图像时通常使用什么算法？

Question

我试图以canvas与CSS相同的视觉保真度渲染缩放图像.

根据我的测试(在Chrome版本43.0.2357.130中完成),它似乎不是Lanczos3,即使我使用ResampleScope测试表明它应该是.

看这里:

用于产生这些结果的代码:

"CSS":

<img src="temp.png" style="width:200px;height:200px">

"canvas drawImage":

ctxNative.drawImage(img, 0, 0, 200, 200);

"画布变换":

ctxTransform.transform(200 / img.width, 0, 0, 200 / img.height, 0, 0);
ctxTransform.drawImage(img, 0, 0, img.width, img.height);

"bicubic"(底部为bicubic的代码)

"bicubic#2"

"缩减样本alg."

"lanczos3"

Answer 1

考虑到Firefox,这里可能是一个有用的链接:

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

因此,有时CSS确实控制图像调整大小过程,但大多数情况下它不会.

根据我的测试,图像缩放质量根据浏览器内部优化的状态而变化很大,例如,当在CSS转换中运行被认为是"加速"时,NxN的源位图可能只缩放一次到固定大小,让我们看看说到200x200,然后这个比特缓冲区被缩放到其他维度MxM,由于有两次传递而失去质量,结果可能会模糊,如果第一个缓冲区大小不够大,这意味着你无法确定结果仅在源位图上.

这就是说,至少在使用GPU变换的情况下,所得到的图像质量可能不依赖于原始图像质量或大小.

在其他情况下,如果没有基于CSS规则的限制或浏览器不服从,它可以按照它最好的方式对图像应用平滑 - 它可以首先使用一些简单的算法转换图像,如果有处理器时间的话如果在当前的GPU /设备配置上是现实的,它可以使用更复杂的算法对图像应用第二过滤传递更清晰.

我相信你对这个主题很熟悉,但这里列出了如何缩放图像的可能性,因此有很多算法可供选择:https: //en.wikipedia.org/wiki/Image_scaling

为了获得更实际的效果,您可以直接访问Chrome的源代码, https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.h&sq=package:chromium&type=cs&rcl= 1435318317

// Quality Methods
//
// Those enumeration values express a desired quality/speed tradeoff.
// They are translated into an algorithm-specific method that depends
// on the capabilities (CPU, GPU) of the underlying platform.
// It is possible for all three methods to be mapped to the same
// algorithm on a given platform.

// Good quality resizing. Fastest resizing with acceptable visual quality.
// This is typically intended for use during interactive layouts
// where slower platforms may want to trade image quality for large
// increase in resizing performance.
//
// For example the resizing implementation may devolve to linear
// filtering if this enables GPU acceleration to be used.
//
// Note that the underlying resizing method may be determined
// on the fly based on the parameters for a given resize call.
// For example an implementation using a GPU-based linear filter
// in the common case may still use a higher-quality software-based
// filter in cases where using the GPU would actually be slower - due
// to too much latency - or impossible - due to image format or size
// constraints.
RESIZE_GOOD,

// Medium quality resizing. Close to high quality resizing (better
// than linear interpolation) with potentially some quality being
// traded-off for additional speed compared to RESIZE_BEST.
//
// This is intended, for example, for generation of large thumbnails
// (hundreds of pixels in each dimension) from large sources, where
// a linear filter would produce too many artifacts but where
// a RESIZE_HIGH might be too costly time-wise.
RESIZE_BETTER,

// High quality resizing. The algorithm is picked to favor image quality.
RESIZE_BEST,

该代码至少包含以下过滤器的枚举:RESIZE_BOX,RESIZE_HAMMING1,RESIZE_LANCZOS2,RESIZE_LANCZOS3,

我想您也可以在image_operations.cc中找到这些过滤器的实现.https : //code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.cc&sq=package : chromium & type = cs

Answer 2

我找到了一篇关于使用image-renderingCSS属性来控制算法的文章。在那篇文章中，作者指出：

\n\n

\n

正如您所看到的，效果不是最佳的\xe2\x80\x93浏览器\xe2\x80\x99的默认缩放算法（通常是双线性插值）已对图像应用了抗锯齿功能。

\n

\n\n

（强调我的）。它还讨论了使用image-renderingCSS 属性来控制使用什么算法。

\n