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

Question

我正在尝试让 canvas 以与 CSS 相同的视觉保真度渲染缩放图像。

根据我的测试(在 Chrome 版本 43.0.2357.130 中完成)，它似乎不是 Lanczos3，尽管我使用 ResampleScope 进行了测试。表明它应该是。

看这里:

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

“CSS”:

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

“ Canvas 绘制图像”:

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

“ Canvas 变换”:

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

"bicubic" (底部的双三次代码)

"bicubic #2"

"downsample alg."

"lanczos3"

Answer 1

关于考虑 Firefox 的问题，这里可能是一个有用的链接:

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

因此，有时 CSS 会控制图像调整大小的过程，但大多数时候它不会。

根据我的测试，图像缩放质量会因浏览器内部优化的状态而有很大差异，例如，在被视为“加速”的 CSS 转换中运行时，NxN 的源位图可能仅缩放一次以固定大小，比方说变成 200x200，之后这个位缓冲区被缩放到其他维度 MxM，这会失去质量，因为有两次通过并且结果可能会模糊，如果第一个缓冲区大小不够大，这意味着您无法确定结果仅基于源位图。

这就是说生成的图像质量可能不依赖于原始图像质量或大小，至少在使用 GPU 转换时是这样。

在其他情况下，如果没有基于 CSS 规则的限制或浏览器不遵守，它可以以它看到的最佳方式对图像应用平滑 - 它可以首先使用一些简单的算法转换图像，如果有足够的处理器时间，它可以对图像应用第二个过滤 channel ，如果在当前 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