html - 用 Canvas 缩小大图像。平滑

Question

当我使用 canvas 和 drawImage 方法缩小大图像时，结果远非完美。

比较这些图像。左边的实际上是带有缩放图像的 Canvas ，右边的是理想的结果。此图像的原始照片为 1600x900 照片。比例从原始大小变为 200x113。

当原始图像的宽度和高度较小或缩放比例较大(即 0.5 - 0.9)时，则一切正常。但我需要让我的用户能够调整大图像的大小并制作漂亮的缩略图。

我尝试用多个小步长缩放图像(例如 1600px -> 1000px -> 500px -> 200px)，结果更好，但对性能很不利，所以我拒绝了。

如果现在无法使用 HTML5 和 canvas 实现我的目标，那么将来是否有可能实现？我只是在想，我是应该拒绝 HTML5 技术并在 ActionScript 上进行上传，还是继续尝试(或等待)使用 HTML5 进行上传？我喜欢 HTML5，其实我不想离开这么友好的技术。

Answer 1

左图是使用更原始的重采样或插值形式缩小的。这可能完全是由于浏览器的渲染引擎如何缩放图像，结果因浏览器而异。

如果可以的话，您可以完全控制生成的图像质量的一种方法是上传图像，在服务器上对其进行缩放，然后将其下载回客户端。

另一种方法是使用 JS 库在客户端重新采样图像。不确定这有多实用。