使用画布缩小大图像。平滑答案

【问题标题】：Scaling down big images with canvas. Smoothing使用画布缩小大图像。平滑
【发布时间】：2012-08-05 19:01:13
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：