创建并分层图案填充,部分透明的图像;即时的网页

时间:2011-08-16 05:05:18

标签: image web-applications image-manipulation

该应用程序与此页面有相似之处,最好的例子是“矩阵箍”磁带样式:

http://www.troohoops.com/products/decorator.php

不同之处在于此示例使用已手动绘制的gif文件来表示磁带样式和样本的每个组合。我的应用程序需要动态创建图层,因为我将处理更多这样的磁带样式而不是仅仅五个,并且可能更多样本;并且因为新的磁带样式将被添加到系统ad hoc中,因此每次将样式添加到系统时,Web操作员都不必绘制数十个图像来表示样式/样本组合。

我的一些想法是:

  1. 使用CSS和图像蒙版和/或z索引......但这似乎无法适当地处理透明度

  2. 构建一个flash应用程序......但这是未知的,因为我没有任何flash编程经验,但我愿意学习它是否可行

  3. 使用XHTML图像映射定义多边形图像区域作为z索引图层并填充重复的样本缩略图......但这又超出了我的理解

  4. 使用可以将样式图层处理为.svg文件的图像库,并使用样本填充矢量区域作为.gif文件

  5. 我没有证据表明任何这些想法都有效。

    假设可以使用The Gimp等软件或其他合适的图像编辑软件创建样式图层。

    我的应用程序还需要将所选样式/样本的快照图像生成为jpeg,gif或png;如果需要另外一项技术,那么这是可以接受的。

    最终解决方案还允许以与上述链接相同的方式从样式和样本列表中进行选择。

    该解决方案将在基于PHP / MySQL的网站上运行,但该解决方案不需要使用PHP / MySQL。

    为了澄清主要问题,逻辑将会是这样的:

    1. 获取固定尺寸的方形缩略图。即一个色板。

    2. 勾勒出不规则形状。即一层磁带样式。

    3. 使用缩略图的图像填充不规则形状,其中缩略图在垂直和水平方向上重复,而不会穿过不规则形状的轮廓,并且不会留下任何未填充的不规则形状。即用样本填充磁带样式图层。

    4. 对五个图层重复此过程,但将图层堆叠在一起,以便在有较高图层的透明未填充区域的情况下可以看到较低图层。

    5. 以jpeg,gif或png文件的形式生成所有图层的展平快照。

    6. 以PayPal付款的形式提供相当于一箱啤酒以获取解决方案大纲;在确定可行技术时可以赎回。

0 个答案:

没有答案