2015-05-09 4 views
3

Я новичок в PHP и работаю на счетчике. Счетчик посещений отлично работает, но теперь я хочу преобразовать числа в изображения.PHP MySQL image hit counter

Я создал 12 изображений 0-9, разделитель и изображение с запятой.

Я искал высоко и низко, чтобы понять, что мне нужно сделать, чтобы преобразовать формат чисел в изображения и не имел успеха. Пока что все, что я нашел, - это сделать базовый счетчик попаданий, используя только файлы, PHP/MySQL и как отображать зашифрованное изображение с помощью PHP/MySQL.

Вопрос в следующем: Как я могу указать данный код, чтобы показывать изображения вместо каждого номера?

Пример текущего результата PHP: Hit: 2.435

Я хочу, чтобы мой PHP, чтобы получить общее количество обращений (пример), а затем взять и заменить 2435 со следующим кодом:

<img src="img/2.png"><img src="img/comma.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png"> 


Примечание: Я использую много нот в коде я показываю здесь. Таким образом, любые новые кодеры могут более легко понять отображаемые сценарии. Я добавлю свой последний/завершенный код внизу этого сообщения, чтобы каждый мог увидеть конечный продукт, когда нашел решение.
Этот код полностью вымышленный как текст хит счетчик

// Begin open SQL connection to database 
$concount = mysqli_connect("site","username","password","database"); 
// End connection to database 

// Begin update number of hits 
mysqli_query($concount,"UPDATE counter SET hits = hits + 1"); 
// End update number of hits 

// Begin get number of hits 
$hits = ("SELECT SUM(hits) FROM counter"); 
// End get number of hits 

// Begin show number of hits 
$result = mysqli_query($concount,$hits); 
while($row = mysqli_fetch_array($result)) { 
    echo "Hits:&nbsp;" . number_format((float)$row['0']) . "&nbsp;"; 
} 
// End show number of hits 

// Begin close SQL connection 
mysqli_close($con); 
// End close SQL connection 


Edit: Ниже конечный результат моего кода. Обратите внимание, что массив в этом скрипте помещает 'в начало и конец массива изображений. (Смотрите следующий пример)

Array ([0] => ' [1] => 2 [2] => 4 [3] => 3 [4] => 5 [5] => ') 

Так, если я не хотел разбитое изображения на эфирном конце моего хита счетчика я должен был использовать их. Я переименовал мое прозрачное изображение, которое я уже строганных об использовании на обоих концах».png (смотрите следующий пример)

<img src="img/'.png"><img src="img/2.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png"><img src="img/'.png"> 


Окончательный код Этот код полностью вымышленный как изображение хит счетчик

// Begin open SQL connection to database 
$concount = mysqli_connect("site","username","password","database"); 
// End connection to database 

// Begin update number of hits 
mysqli_query($concount,"UPDATE counter SET hits = hits + 1"); 
// End update number of hits 

// Begin get number of hits 
$hits = ("SELECT SUM(hits) FROM counter"); 
// End get number of hits 

// Begin assign $hits an id 
$result = mysqli_query($concount,$hits); 
while($row = mysqli_fetch_array($result)) { 
$totalhits=("'" . $row[0] . "'"); 
} 
// End assign $hits an id 

// Begin get id for number of hits, split the string into array, and assign id to numbers 
$arr = str_split($totalhits); 
$numbers = $arr; 
foreach ($numbers as $value) { 
// End get id for number of hits, split the string into array, and assign id to numbers 

// Begin show number of hits as images 
    echo "<img src=\"img/".$value.".png\">"; 
} 
// End show number of hits as images 

// Begin close SQL connection 
mysqli_close($con); 
// End close SQL connection 


Заключительные замечания: Я не пробовал Аддин g запятая для большего числа или удаление апострофа на массиве. Если я это сделаю, я вернусь и отредактирую это.

+0

Обычно нецелесообразно использовать изображения для номера. Вы должны использовать числа в html с классным CSS. –

+0

@ jQuery.PHP.Magento.com Я согласен, что использование изображений для номера или любого текста и т. Д. Не очень хорошо, но CSS лучше. Потому что я не знаю, как установить шрифт на некоторых смартфонах или потому, что некоторые из них могут быть заблокированы, я выбрал использование изображений. Все настроено на определенный размер, а также для предотвращения искажений и т. Д. –

+0

Итак, вы не можете использовать индивидуальный шрифт на своем веб-сайте? круто ! –

ответ

2

Вам нужно разделить счетчик попаданий на массив с каждым значением, содержащим одну цифру, а затем использовать для цикла для добавления изображений.

<?php 
$array = str_split($your_hit_variable_from_mysql); 
if(!empty($array)){ 
    foreach($array as $single){ 
     echo '<img src="'.$single.'.jpg"'>; 
    } 
}else{ 
     echo '<img src="0.jpg"'>; 
} 
?> 

Убедитесь вы сохраняете число в целочисленном формате, а не строка, как 52,200 с запятой.

Для дополнительной проверки Here.

EDIT: Добавлена ​​обработка исключений, когда есть счетчик 0 для изображения.

+0

Ответы, которые предоставили jQuery.PHP.Magento.com и @bvdb, помогли мне направить мой окончательный ответ. Спасибо. Я выбрал ответ jQuery, потому что он ответил на мой вопрос и не предоставил мне информацию, которую я не просил. Я по-прежнему ценю ответ от bvdb. –

+0

@AWOLTheSquatch, добавленный код обработки исключений. –

2

Вы можете использовать str_split($str), чтобы преобразовать строку в массив символов. Далее вы можете перебирать их с помощью простого цикла for или foreach.

EDIT:

Есть несколько вариантов на как визуализировать образы. Вы можете просто взять html <img src=''> теги или CSS.

Если вы используете CSS, вы можете создать 1 изображение, которое содержит все отдельные изображения (то есть spritemap или tilemap). Затем используйте CSS, чтобы разделить его снова на отдельные изображения. Вы можете выполнить это, определив общее объявление для фонового изображения, а затем пусть каждое числовое значение определяет смещение внутри этого изображения.

.nr1 .nr2 .nr3 {  
    background: url(sprites.png) no-repeat; 
} 
.nr1 { background-position: 0 0 ; } 
.nr2 { background-position: 0 -21px ; } 
.nr3 { background-position: -21px -42px ; } 

Задача поиска точного смещения может показаться трудоемкой. Но есть несколько бесплатных онлайн-инструментов, которые могут сделать это за вас. Я лично использовал this one. Вы можете просто перетащить отдельные изображения на свой веб-браузер, и он создаст одно изображение и необходимый CSS.

Одним из преимуществ использования spritemap является то, что все изображения загружены вместе. Если вы используете отдельные изображения, вы можете увидеть какое-то мерцание во время загрузки изображений.