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

Question

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

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

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

我试图用多个小步骤缩放图像（例如1600px - > 1000px - > 500px - > 200px），效果更好，但是性能非常糟糕，所以我拒绝了这一点。

如果现在无法使用HTML5和画布实现我的目标，那么将来有可能吗？我只是在考虑是否应该拒绝HTML5技术并在ActionScript上进行上传或继续尝试（或等待）使用HTML5进行此操作？我喜欢HTML5，实际上我不想留下这么友好的技术。

Answer 1

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

如果这是一个选项，您可以完全控制所得图像质量的一种方法是上传图像，将其缩放到服务器上，然后将其下载回客户端。

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