jquery变形图像效果

Question

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

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

Answer 1

另一个可能同样慢但不需要任何画布的选项是使用 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 2

这并非不可能...但它可能会很慢。

您必须使用画布来获取图像数据并进行转换。看看这个SO答案和这个插件，这可能有助于让事情变得更容易。我没有使用过那个插件，所以在IE中，你可能必须包含一个额外的画布插件。

Answer 3

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