Question

我试图这样做，每当有人在页面上捐赠一定数量的图像时，就会显示另一部分图像。我已经完成了大部分其他逻辑（PayPal提供了很好的独特“你捐赠了”标识符等等），然而，我在逐位显示图像方面遇到了麻烦。

我尝试将图像分成小块（人们想要至少250次捐赠，直到图像被完全显示），然而，由于多个格式化图像，这不起作用。有没有更好的方法（比方说，PHP图像处理或CSS / Javascript）？

Answer 1

为什么不创建251个静态图片，每个支付级别一个，并根据迄今收到的资金比例动态提供正确的静态图像。

这似乎是最简单的方法，唯一需要的代码是查询付款级别，并将相关图像发送给客户。

所以请image0.jpg（空），image1.jpg（一个细分），image2.jpg等等，最多image250.jpg（所有细分），并拥有您的网站应用服务正确。

您需要确保无法在网站的公共区域访问这些图片，这样人们就无法找出网址并窃取您的“宝贵”。

因此，您的Web应用程序将收到images/image.jpg请求，查询应发送的图像，并使用实际图像中的数据流进行响应，如：

if actual > desired:
    number = 250
else:
    number = int (actual * 250 / desired)
imagename = "image" + str(number) + ".jpg"

Answer 2

最快捷的方法是使用Google Charts或PayPal的图片，看看您是否可以根据自己的网站进行调整。否则，您将需要动态生成图像，或静态生成图像。由于它不是那么多图像，你也可以静态地生成它们。

您可以使用多种工具执行此操作，但ImageMagick可能是最通用的。如果你想使用你自己的图像，这里是你用ImageMagick做的方法。

# take your source image, and make it a known size.
#In this case, I'll make my image a 256 px square
convert flower.jpg -resize 256x256^ -gravity center -extent 256x256 flower_256.jpg
# run this command in a bash shell to generate the images
for i in $(seq -w 0 256); 
do 
   convert flower_256.jpg -gravity west -background blue -crop ${i}x256+0+0 -extent 256x256 flower_seq_$i.jpg
done

您现在将拥有256张图像：

_{（来源：theeggeadventure.com）}

_{（来源：theeggeadventure.com）}

_{（来源：theeggeadventure.com）}

_{（来源：theeggeadventure.com）}

显然，您可以根据需要调整几何体或颜色。

Answer 3

您可以隐藏<div>内的图片，溢出设置为hidden。然后，当您收到更多捐款时，您可以简单地将div元素设置得更高。

<div id="imageContainer">
   <img src="secretImg.jpg"/>
</div>

CSS：

#imageContainer {
   height: 20px;
   overflow: hidden;
}

一点一点地显示图像？

3 个答案: