jquery变形图像效果

发布于 2024-12-17 10:49:55 字数 231 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迟到的我 2024-12-24 10:49:55

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

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

然后，您可以将图像映射到起始像素级别的调色板。例如，如果图像为 100 像素 x 200 像素，第一级像素化为 50 x 100 的网格，则将图像替换为 50x100 = 5000，，每个图像都带有来自颜色的背景图像调色板。

这需要在服务器端完成并作为 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>

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

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

Another option that might be equally as slow, but would not require any canvases would be to write the pixelation algorithm using 1x1 pixel images.

The first step would be to reduce the image to a palette of 32 colors.

Then you would map the image to the palette at the start pixelation level. For example, if the image was 100px by 200px and the first level pixelation is a grid 50 by 100, replace the image with, 50x100 = 5000, <IMG> each with a background image from the color palette.

This would need to be done server side and passed as a javascript array that would then be converted to <IMG>:

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

Would become:

<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>

Then in javascript enlarge some of the <IMG>, and reduce the grid by removing some of the <IMG>, until some stopping magnification is reached.

Then replace that with the new image on high magnification and reverse the algorithm for the new image.

回复收藏 0 原文