当前位置：文江博客话题详情

一点一点地揭示图像？

发布于 2024-07-27 18:10:16 字数 226 浏览 4 评论 0 原文

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

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

原文

分享到QQ

分享到微博

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

发布评论

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

生生漫 2024-08-03 18:10:16

为什么不创建 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"

Why don't you just create 251 static images, one for each payment level and serve the correct static image dynamically, based on the proportion of funds received to date.

This seems to be the simplest way of doing it, the only code required is to query the payment level, and send the relevant image down to the client.

So have a image0.jpg (empty), image1.jpg (one segment), image2.jpg and so on, up to image250.jpg (all segments), and have your web application serve the correct one.

You'll need to make sure these images aren't accessible in the public area of your web site so people can't just figure out the URL and steal your "precious".

So, your web application will receive a request for images/image.jpg, query which image should be sent, and respond with the data stream from the actual image, something like:

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

回复收藏 0 原文

蓝咒 2024-08-03 18:10:16

您可以将图像隐藏在

内，并将溢出设置为 hidden。然后，当您收到更多捐款时，只需将 div 元素调高即可。

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

CSS：

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

You could hide the image inside a <div>, with overflow set to hidden. Then you can simply make the div element higher as you recieve more donations.

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

CSS:

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

回复收藏 0 原文

○闲身 2024-08-03 18:10:16

最快的方法是使用 Google 图表或 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）}

显然，您可以调整几何形状或颜色以适应。

The quickest way would be to use Google Charts or PayPal's images and see if you can adapt one to your website. Otherwise, you're going to need to either generate the images dynamically, or statically generate them. Since it's not that many images, you may as well statically generate them.

You could do this with a number of tools, but ImageMagick is probably the most versatile. If you want to use you own image, here's how you could do it with 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

You'll now have 256 images looking like this:

_{(source: theeggeadventure.com)}

_{(source: theeggeadventure.com)}

_{(source: theeggeadventure.com)}

_{(source: theeggeadventure.com)}