Ein Bild Stück für Stück enthüllen?

Question

Ich versuche es so zu bekommen, jedes Mal, wenn jemand einen festgelegten Betrag auf einer Seite spendet, wird ein weiterer gleicher Teil eines Bildes aufgedeckt. Ich habe das meiste der anderen Logik (PayPal bietet nette einzigartige "Sie haben gespendet" Bezeichner und so), aber ich habe Probleme mit der Veröffentlichung des Bildes nach und nach.

Ich habe versucht, das Bild in kleine Stücke zu zerlegen (Person will mindestens 250 Spenden, bis das Bild vollständig aufgedeckt wird), aber das funktioniert nicht wegen mehrerer Formatierungsbilder. Gibt es einen besseren Weg (zB PHP-Bildverarbeitung oder vielleicht CSS/Javascript)?

Answer 1

Warum Sie nicht nur 251 statische Bilder erstellen, eine für jede Zahlung Ebene und dienen dazu, die korrekte statische Bild dynamisch, basierend auf dem Anteil der Mittel bisher erhalten hat.

Dies scheint der einfachste Weg zu sein, der einzige Code, der benötigt wird, besteht darin, die Zahlungsebene abzufragen und das relevante Bild an den Client zu senden.

haben also eine image0.jpg (leer), image1.jpg (ein Segment), image2.jpg und so weiter, bis zu image250.jpg (alle Segmente), und Ihre Web-Anwendung die richtige dienen haben.

Sie müssen sicherstellen, dass diese Bilder im öffentlichen Bereich Ihrer Website nicht zugänglich sind, damit die Leute nicht einfach die URL herausfinden und Ihr "Edel" stehlen können.

Also, Ihre Web-Anwendung eine Anforderung für images/image.jpg erhalten, Abfrage, die Bild gesendet werden soll, und mit dem Datenstrom von dem tatsächlichen Bild reagieren, so etwas wie:

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

Answer 2

Der schnellste Weg wäre, Google Charts oder PayPal Bilder zu verwenden und zu sehen, ob Sie einen zu Ihrer Website anpassen können. Andernfalls müssen Sie die Bilder entweder dynamisch generieren oder statisch generieren. Da es nicht so viele Bilder sind, können Sie sie auch statisch erzeugen.

Sie könnten dies mit einer Anzahl von Werkzeugen tun, aber ImageMagick ist wahrscheinlich das vielseitigste. Wenn Sie ein eigenes Bild verwenden möchten, können Sie es mit ImageMagick so machen.

# 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 

Sie werden jetzt 256 Bilder haben wie folgt aussehen:

25% http://www.theeggeadventure.com/2009/reveal/flower_seq_064.jpg 50% http://www.theeggeadventure.com/2009/reveal/flower_seq_128.jpg 75% http://www.theeggeadventure.com/2009/reveal/flower_seq_192.jpg 100% http://www.theeggeadventure.com/2009/reveal/flower_seq_256.jpg

Natürlich können Sie die Geometrie oder Farben anpassen anpassen.

Answer 3

Sie könnten das Bild in einem <div> ausblenden, mit Überlauf auf hidden festgelegt. Dann können Sie einfach das div-Element erhöhen, wenn Sie mehr Spenden erhalten.

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

CSS:

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