ビット単位でイメージを表示していますか？

Question

私はそれを得ようとしています。誰かがページに一定額を寄付するたびに、イメージの別の部分が明らかになります。私は他のロジックのほとんどを持っています（PayPalは素敵な "あなたが識別子を寄付しました"などを提供しています）。しかし、ビットごとにイメージを公開するのに問題があります。

イメージを完全に公開するまで、小さなチャンク（人は少なくとも250の寄付を望みます）に分割しようとしましたが、複数の書式設定イメージのために機能しません。より良い方法はありますか（PHPの画像処理やCSS/Javascriptなど）？

Answer 1

。

これは最も簡単な方法ですが、支払レベルを照会して関連するイメージをクライアントに送信するだけです。

ので、image0.jpg（空）、image1.jpg（1セグメント）を持っている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枚の画像を持っています：

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

を明らかに、あなたが合うように形状や色を調整することができます。

Answer 3

<div>内の画像を非表示にすることができます。オーバーフローはhiddenに設定されています。次に、より多くの寄付を受け取るとdiv要素を高くするだけです。

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

CSS：あなただけの251静止画、各支払レベルのための1つを作成し、これまでに受け取った資金の割合に基づいて、動的に正しい静的な画像を提供していないのはなぜ

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