用Javascript实现双三次插值缩放图像

Question

3

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

基本上我的问题是：Firefox在缩小带有精细特征的图像方面完全失败，因为它只有最近邻居和双线性插值。即使是IE，每个其他浏览器都支持双三次插值。有talk说这将在不久的将来被包含在内，但这种谈话已经进行了一年以上。

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

- colithium

1

那么你只需要在Firefox或其他支持canvas的浏览器上使用它？ - user287466

我所拥有的网站在除了FF（即使是最新版本）之外的所有浏览器中看起来都很好。这是因为FF没有提供Bicubic（或更好的）调整大小功能的直接结果。 - colithium

我花了一些时间在谷歌上搜索，希望能找到一些可以“直接转换”的代码，但是我没有什么运气。这是一个被严密保护的秘密吗？ - user287466

我认为通常的答案是：在服务器上自己生成。或者：使用Flash/Silverlight。我真的不想使用这两个选项，但是......看起来它只是JavaScript的一个部分 :-/ - colithium

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- donohoe · Accepted Answer

这是可能的。您可以在同一域上获取图像，将其写入画布，然后从那里操作像素数据（虽然复杂，但我相信是可能的），然后将其用作输出为png / gif / jpg ... 但是...我认为您不会发现它比CSS更好地保留精细特征的方式。