jquery变形图像效果

Question

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

我试图在jquery中获得变形效果（如在flash图像旋转器中的此页面上，＆gt; http://www.sikids.com）。或者至少是一种非常相似的效果。我看到jquery UI有一些变形效果，但我找不到它。这对我们的客户很重要，因此任何尽可能接近的效果都会很棒。

Answer 1

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

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

然后，您将在开始像素化级别将图像映射到调色板。例如，如果图像是100px乘200px并且第一级像素化是网格50乘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 2

这不是不可能......但可能会很慢。

您必须使用画布来抓取图像数据并对其进行转换。查看此SO answer和this plugin，这可能有助于简化操作。我没有使用过该插件，因此在IE中，您可能需要添加一个canvas plugin。

Answer 3

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