javascript - 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 中，你可能需要包含一个额外的canvas plugin。

Answer 3

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