html - 使用画布缩小大图像。平滑

Question

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

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

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

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

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

Answer 1

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

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

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