Javascript jquery变形图像效果

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

---

我正试图在jquery中获得变形效果（就像flash image rotator->中的这一页）。或者至少是一种非常相似的效果。我看到jQueryUI有一些变形效果，但我还没有找到。这对我们的客户来说很重要，所以任何尽可能接近的效果都会非常棒。

这不是不可能的。。。但这可能很慢

---

您必须使用canvas获取图像数据并对其进行转换。看看这个，这可能会让事情变得更简单。我没有使用这个插件，所以在IE中，你可能需要添加一个额外的插件。

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

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

然后将图像映射到起始像素级别的调色板。例如，如果图像为100px x 200px，且第一级像素化为50 x 100的网格，则将图像替换为50x100=5000，

...

然后在javascript中放大一些

，并通过移除一些

来缩小网格，直到达到某种停止放大

---

然后用高倍放大的新图像替换它，并反转新图像的算法。

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

虽然Brett的回答提供了很多关于如何进行变形的见解，但我还是同意你的回答，因为我认为使用插件会更容易。我选择fudgey作为回答问题的人，但是你的解释很好+1这是Raphael.js中的shape tweening演示：这是另一个Raphael shape tweening演示：我想知道是否可以使用Emscripten将libmorp编译为JavaScript：/

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>