jquery变形图像效果

Question

我很确定这是不可能的，但是。 . .

我正在尝试在 jquery 中获得变形效果（例如在 Flash 图像旋转器中的此页面上 -> http://www.sikids.com）。或者至少是非常相似的效果。我看到jquery UI有一些变形效果，但我一直没能找到。这对我们的客户很重要，所以任何尽可能接近的效果都会很棒。

Answer 1

为此目的开发了一个名为 MorpherJS 的 JavaScript 库 - 它完全是客户端 JavaScript。可以在here 找到一些 MorpherJS 的演示。它使用 HTML 画布元素来显示变形图像动画。

Answer 2

另一个可能同样慢但不需要任何画布的选项是使用 1x1 像素图像编写像素化算法。

第一步是将图像缩小为 32 种颜色的调色板。

然后您将在开始像素化级别将图像映射到调色板。例如，如果图像是 100 像素 x 200 像素，并且第一级像素化是 50 x 100 的网格，则将图像替换为 50x100 = 5000，<IMG> 每个都使用调色板中的背景图像。

这需要在服务器端完成并作为 javascript 数组传递，然后将其转换为 <IMG>:

image1 = [3, 4, 1, 2, ...];

会变成：

<div id="image1Pixelation">
  <img src="image1_3.png" width="2px" height="2px"/>
  <img src="image1_4.png" width="2px" height="2px"/>
  <img src="image1_1.png" width="2px" height="2px"/>
  <img src="image1_2.png" width="2px" height="2px"/>
  ...
</div>

然后在 javascript 中放大一些 <IMG>，并通过删除一些 <IMG> 来缩小网格，直到达到停止放大。

然后将其替换为高倍率的新图像并反转新图像的算法。

Answer 3

这并非不可能……但可能会很慢。

您必须使用画布来获取图像数据并对其进行转换。看看这个SO answer 和this plugin，这可能有助于让事情变得更容易。我没有使用过那个插件，所以在 IE 中，你可能需要添加一个额外的canvas plugin。