Покажите изображение по крупицам? - PullRequest
Новая
       42

Покажите изображение по крупицам?

1 голос
/ 14 июля 2009

Я пытаюсь получить это так, что каждый раз, когда кто-то жертвует определенную сумму на странице, появляется другая равная часть изображения. У меня отключена большая часть другой логики (PayPal предоставляет отличные уникальные идентификаторы «Вы пожертвовали» и т. Д.), Однако у меня возникают проблемы с постепенным раскрытием изображения.

Я попытался разбить изображение на маленькие кусочки (человек хочет по меньшей мере 250 пожертвований, пока изображение не будет полностью раскрыто), однако это не работает из-за множественного форматирования изображений. Есть ли лучший способ (скажем, обработка изображений PHP или, возможно, CSS / Javascript)?

Ответы [ 3 ]

3 голосов
/ 14 июля 2009

Почему бы вам просто не создать 251 статическое изображение, по одному для каждого уровня оплаты, и динамически подавать правильное статическое изображение в зависимости от доли средств, полученных на сегодняшний день.

Это кажется самым простым способом сделать это, единственный необходимый код - запросить уровень оплаты и отправить соответствующее изображение клиенту.

Так что имейте image0.jpg (пусто), image1.jpg (один сегмент), image2.jpg и т. Д. До image250.jpg (все сегменты), и ваше веб-приложение будет обслуживать правильный.

Вам необходимо убедиться, что эти изображения недоступны в публичной части вашего веб-сайта, чтобы люди не могли просто определить URL-адрес и украсть ваше «драгоценное».

Итак, ваше веб-приложение получит запрос на images/image.jpg, запросит, какое изображение должно быть отправлено, и ответит потоком данных из фактического изображения, что-то вроде: 

if actual > desired:
    number = 250
else:
    number = int (actual * 250 / desired)
imagename = "image" + str(number) + ".jpg"
0 голосов
/ 14 июля 2009

Вы можете скрыть изображение внутри <div> с переполнением, установленным на hidden. Тогда вы можете просто сделать элемент div выше, когда получите больше пожертвований. 

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

CSS: 

#imageContainer {
   height: 20px;
   overflow: hidden;
}
0 голосов
/ 14 июля 2009

Самый быстрый способ - использовать 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%
(источник: theeggeadventure.com )
50%
(источник: theeggeadventure.com )
75%
(источник: theeggeadventure.com )
100%
(источник: theeggeadventure.com )

Очевидно, вы можете настроить геометрию или цвета в соответствии с вашими потребностями.

...