php - 一点一点地揭示图像？

Question

我正在努力做到这一点，每当有人在页面上捐赠一定数量时，就会显示图像的另一等量部分。我已经掌握了大部分其他逻辑（PayPal 提供了很好的独特的“您已捐赠”标识符等），但是，我在一点一点地显示图像时遇到了麻烦。

我尝试将图像分成小块（在图像完全显示之前，人们至少需要 250 次捐赠），但是，由于多个格式图像，这不起作用。有没有更好的方法（比如 PHP 图像处理或者 CSS/Javascript）？

Answer 1

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

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

所以有一个image0.jpg（空）、image1.jpg（一个段）image2.jpg等等，直到image250.jpg（所有段），并让您的 Web 应用程序提供正确的一个。

您需要确保这些图像无法在您网站的公共区域访问，这样人们就不能仅仅找出 URL 并窃取您的“珍贵”。

因此，您的 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

您可以将图像隐藏在 a<div>中，并将溢出设置为hidden. 然后，当您收到更多捐款时，您可以简单地使 div 元素更高。

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

CSS：

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