使用 Javascript 双三次调整图像大小答案

【问题标题】：Bicubic-ly Resize Images with Javascript使用 Javascript 双三次调整图像大小
【发布时间】：2011-04-06 14:13:04
【问题描述】：

有没有办法使用 JavaScript 调整实际图像的大小？我不是在谈论修改 DOM 以让浏览器调整图像大小。我实际上想调整图像的像素数据大小，然后显示它。

基本上我的问题是：Firefox 在缩小具有精细特征的图像方面完全失败，因为它只有最近邻和 Binlinear。其他所有浏览器——甚至 IE——都支持 Bicubic。 talk 将在不久的将来包含此内容，但该讨论已经持续了一年多。

我不介意下载完整尺寸的图像，因为无论如何我都希望下载它们。当用户将鼠标悬停在图像的小版本上时，大版本会立即出现在页面的其他位置。如果我在服务器端调整大小，我必须下载图像的两个副本，这会导致更多的流量。如果没有其他解决方法，那么这就是我将要做的......我只是不想这样做。

【问题讨论】：

那么你只需要 Firefox 或其他支持画布的浏览器吗？
我所拥有的网站看起来一切都很好，但 FF（甚至是最新版本）。这是 FF 不提供双三次（或更好）大小调整功能的直接结果。
我在谷歌上花了一些时间，希望能找到一些可以“只是转换”的代码，但我没有任何运气。这是一个严密保护的秘密吗？
我认为通常的答案是：在服务器上自己生成它们。或者：使用 Flash/Silverlight。我真的不想使用任何一个选项，但是......看起来它不是javascript的一部分：-/

【解决方案1】：

这是可能的。您在同一域上获得图像，写入画布，然后从那里操作像素数据（很复杂，但我敢肯定），然后使用该图像或输出为 png/gif/jpg ......但是......我认为您不会发现保留 CSS 的精致功能会更好。

【讨论】：