Keskustelu: Nettisivujen teko: Kirjainten korvaus kuviksi

Rocceri [13.05.2009 18:48:44]

Heippa

Tein osoitteeseen http://metalhabbo.com/tekstigeneraattori tuommoisen skriptin, jonka on tarkoitus vääntää kirjoitettu teksi (kirjaimet a-z) vastaaviksi kuviksi.
Tämä ei toimi, paitsi jos on vain samoja kirjaimia.
Koodi näyttää tältä:

<?php
//Otetaan teksti laatikosta "teksti" ja asetetaan muuttujaan $teksti
$teksti = $_POST["teksti"];

//Fontit:
$font_neon = $_POST["neon"];


if ($font_neon == true) {
$teksti = str_replace("a", "<img src=\"neon/a.gif\">", $teksti);
$teksti = str_replace("b", "<img src=\"neon/b.gif\">", $teksti);
$teksti = str_replace("c", "<img src=\"neon/c.gif\">", $teksti);
$teksti = str_replace("d", "<img src=\"neon/d.gif\">", $teksti);
$teksti = str_replace("e", "<img src=\"neon/e.gif\">", $teksti);
$teksti = str_replace("f", "<img src=\"neon/f.gif\">", $teksti);
$teksti = str_replace("g", "<img src=\"neon/g.gif\">", $teksti);
$teksti = str_replace("h", "<img src=\"neon/h.gif\">", $teksti);
$teksti = str_replace("i", "<img src=\"neon/i.gif\">", $teksti);
$teksti = str_replace("j", "<img src=\"neon/j.gif\">", $teksti);
$teksti = str_replace("k", "<img src=\"neon/k.gif\">", $teksti);
$teksti = str_replace("l", "<img src=\"neon/l.gif\">", $teksti);
$teksti = str_replace("m", "<img src=\"neon/m.gif\">", $teksti);
$teksti = str_replace("n", "<img src=\"neon/n.gif\">", $teksti);
$teksti = str_replace("o", "<img src=\"neon/o.gif\">", $teksti);
$teksti = str_replace("p", "<img src=\"neon/p.gif\">", $teksti);
$teksti = str_replace("q", "<img src=\"neon/q.gif\">", $teksti);
$teksti = str_replace("r", "<img src=\"neon/r.gif\">", $teksti);
$teksti = str_replace("s", "<img src=\"neon/s.gif\">", $teksti);
$teksti = str_replace("t", "<img src=\"neon/t.gif\">", $teksti);
$teksti = str_replace("u", "<img src=\"neon/u.gif\">", $teksti);
$teksti = str_replace("v", "<img src=\"neon/v.gif\">", $teksti);
$teksti = str_replace("w", "<img src=\"neon/w.gif\">", $teksti);
$teksti = str_replace("x", "<img src=\"neon/x.gif\">", $teksti);
$teksti = str_replace("y", "<img src=\"neon/y.gif\">", $teksti);
$teksti = str_replace("z", "<img src=\"neon/z.gif\">", $teksti);
}

echo $teksti;

?>
<div style="padding-left: 45px;">
<form action="tekstigeneraattori.php" method="post">
<input type="name" name="teksti" size="100"><br>
<input type="radio" name="neon"> NEON<br>
<input type="submit" value="Luo">
</form></div>

Tuo tulostaa esim. tekstin pätkällä "moi" pelkkiä S kuvia ja muuta sekotusta.
Sanalla "moi" lähdekoodi näyttää tämän tilalla:

<img src="neon/m.gif"><img src="neon/o.gif">]<img src="neon/i.gif">

Näin:

<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">e<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif"><img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">/m.gif"><img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif"><i<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">e<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif"><img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">/m.gif">g <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">e<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif"><img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="ne<img <img src="neon/s.gif"><img <img src="neon/s.gif">rc="neon/r.gif">c="neon/o.gif">n/n.gif">/i.gif">

Tämä on ihan siansaksaa kyllä.
Mistä tämmöinen virhe johtuu? :O

Grez [13.05.2009 18:55:44]

No mietitään nyt vaikka sanan "hi" muuttamista

korvataan h

Alkuperäinen:
hi

Muuttuu muotoon:
<img src="neon/h.gif">i

Korvataan i

Edellisen tulos:
<img src="neon/h.gif">i

Muuttuu muotoon:
<<img src="neon/i.gif">mg src="neon/h.g<img src="neon/i.gif">f"><img src="neon/i.gif">

Muutenkin toi koodi on ihan järjetön, ennemmin toi if ($font_neon ...-lohko vaikka tälleen:

if ($font_neon) {
	$uusi='';
	for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="neon/' . $teksti[$i] . '.gif">';
	$teksti=$uusi;
}

Rocceri [13.05.2009 19:00:41]

Miten tämä sitten kuuluisi asettee?

EDIT: Jollet editoinut aihettas, niin toi loppu ei näkynyt.
Tämä toimii hyvin :)

EDIT2: Jostain syystä onnistuin poistamaan aloitusviestin :S

Tumettaja [13.05.2009 19:17:02]

Tarkistus kuulu oikeaoppisesti tehdä näin:

$font_neon = $_POST["neon"];

if (isset($font_neon)) {
  //...
}

Grez [13.05.2009 19:21:21]

Tumettaja, tarkoituksella en kommentoinut mitään muuta kuin tuota if -lohkon sisällä olevaa koodia. Eli kaikki muu roska sen ympärillä täytyy vielä korjata erikseen.

kayttaja-2791 [13.05.2009 19:38:52]

Tästähän tuli mielenkiintoisen näköinen säie ilman aloitusviestiä...

(Mod. palautti kuitenkin aloitusviestin.)

tsuriga [13.05.2009 20:35:57]

Tumettaja kirjoitti:

Tarkistus kuulu oikeaoppisesti tehdä näin:
$font_neon = $_POST["neon"];

if (isset($font_neon)) {
  //...
}

Tarkistus kuuluu tehdä ennen sijoitusta

<?php
$font_neon = '';
if (isset($_POST['neon'])) {
    $font_neon = $_POST['neon'];
}
?>

jo123 [13.05.2009 21:42:43]

Njoo. Käytä preg_replacea, tai sitten jotain muuta säännöllisten lausekkeiden functiota kuten ereg jne. Saattaa muuten toimia panemalla korvattavat ja korvautuvat arrayna (en oo varma asiasta).

Niko [13.05.2009 23:41:39]

strtr: https://www.php.net/strtr

Rocceri [14.05.2009 13:48:59]

Kun tässähän on monta kuvaa, niin saisiko PHP:llä kasattua monta kuvaa yhdeksi? Eli jos tuolla tekee tekstin KUVA, niin siinä on 4 kuvaa; K, U, V ja A, kun voisi olla yksi kuva; KUVA.

Metabolix [14.05.2009 13:57:19]

Voit käyttää vaikka for-silmukkaa kirjainten korvaamiseen yksitellen:

<?php
$pituus = strlen($teksti);
$tulos = '';
for ($i = 0; $i < $pituus; ++$i) {
  if ('a' <= $teksti[$i] && $teksti[$i] <= 'z') {
    $tulos .= sprintf('<img src="%s.gif">', $teksti[$i]);
  } else {
    $tulos .= $teksti[$i];
  }
}
?>

Kuvia voit yhdistellä GD-kirjastolla. Koodivinkeissä on kyllä esimerkkejä piirtämisestä, joten etsipä sieltä.

Rocceri [14.05.2009 14:22:35]

Metabolix kirjoitti:

Voit käyttää vaikka for-silmukkaa kirjainten korvaamiseen yksitellen:

<?php
$pituus = strlen($teksti);
$tulos = '';
for ($i = 0; $i < $pituus; ++$i) {
  if ('a' <= $teksti[$i] && $teksti[$i] <= 'z') {
    $tulos .= sprintf('<img src="%s.gif">', $teksti[$i]);
  } else {
    $tulos .= $teksti[$i];
  }
}
?>

Ihan kätevä tapaus.

Selasin PHP koodivinkeistä Grafiikka osuuden läpi (Uskoisin GD-kirjaston sinne kuuluvan^^), mutta en löytänyt mitään tuon kaltaista mitä hain,

Rocceri kirjoitti:

Kun tässähän on monta kuvaa, niin saisiko PHP:llä kasattua monta kuvaa yhdeksi? Eli jos tuolla tekee tekstin KUVA, niin siinä on 4 kuvaa; K, U, V ja A, kun voisi olla yksi kuva; KUVA.

Metabolix [14.05.2009 14:30:39]

Sitten opettelet vihdoin ohjelmoimaan itse. Tosin esimerkiksi tämä vinkki sisältää tarvitsemasi koodin.

Antti Laaksonen [14.05.2009 14:37:46]

Tuossa on vielä toinen esimerkki asiasta:

<?php

$teksti = "esimerkki";

$kirjaimet = "abcdefghijklmnopqrstuvwxyz";

$kuva = imagecreate(strlen($teksti)*55, 50);

$tausta = imagecolorallocate($kuva, 255, 255, 255);

for ($i = 0; $i < strlen($teksti); $i++) {
    $kirjain = $teksti[$i];
    if (strstr($kirjaimet, $kirjain) === false) continue;
    if ($taulu[$kirjain] == "") {
        $taulu[$kirjain] = imagecreatefromgif("neon/{$kirjain}.gif");
    }
    imagecopy($kuva, $taulu[$kirjain], $i*55, 1, 0, 0, 50, 48);
}

header("Content-type: image/png");

imagepng($kuva);

?>

Rocceri [14.05.2009 15:15:54]

Hyvä Antti! Melkein toimii, mutta ei ihan.
Jos kirjoittaa esim. "moi" ja painaa "Luo", niin tämä menee sivulle showimg.php (niin kuuluukin), jossa sitten on tälläinen koodi:

<?php
//Otetaan teksti laatikosta "teksti" ja asetetaan muuttujaan $teksti
$teksti = $_POST["teksti"];
//Otetaan valinta "valitse" painikkeista ja asetetaan muuttujaan $valitse
$valitse = $_POST["valitse"];


//FONT NEON
if ($valitse == "neon") {
$tyyli = "neon";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="neon/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}

//FONT DIAMOND
elseif ($valitse == "diamond") {
$tyyli = "diamond";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="diamond/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}

//FONT ALPHA
elseif ($valitse == "alpha") {
$tyyli = "seka";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="seka/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}


$kirjaimet = "abcdefghijklmnopqrstuvwxyz";

$kuva = imagecreate(strlen($teksti)*55, 50);

$tausta = imagecolorallocate($kuva, 255, 255, 255);

for ($i = 0; $i < strlen($teksti); $i++) {
    $kirjain = $teksti[$i];
    if (strstr($kirjaimet, $kirjain) === false) continue;
    if ($taulu[$kirjain] == "") {
        $taulu[$kirjain] = imagecreatefromgif("$tyyli/{$kirjain}.gif");
    }
    imagecopy($kuva, $taulu[$kirjain], $i*55, 1, 0, 0, 50, 48);
}

header("Content-type: image/png");

imagepng($kuva);

?>

Tässäkin on (Vai onko?) sama vika kuin tuossa aloitus viestissäni.
Nyt tämä kyllä tulostuu erillailla. Sanalla "moi" sivulla ei ole lähdekoodia (hyvä asia, eli tämä toimii melkein), mutta kuva on tuolla moi sanalla seuraava:

IMG SRC NEON M GIF IMG SRC NEON O GIF IMG SRC NEON I GIF

eikä se mitä kuuluu.

PS. Kun tuossa on tuo imagecopy($kuva, $taulu[$kirjain], $i*55, 1, 0, 0, 50, 48);, niin miten nuo korkeudet leveydet tms. voi laittaa automaattisiksi? :O

Merri [14.05.2009 16:45:43]

Looppaa kahdesti. Ensin käyt merkkijonon läpi ja lasket kirjainkuvien mittasuhteet yhteen, sitten vasta luot kohdekuvan ja ladot kirjainkuvat siihen.

Metabolix [14.05.2009 17:25:25]

Tietenkään sinun ei kuulu korvata tekstiä img-tageilla, jos kerran tarkoituksenasi on tehdä siitä yksittäinen kuva.

               m                     o                     i
<img src="neon/m.gif"><img src="neon/o.gif"><img src="neon/i.gif">
 IMG SRC  NEON M GIF   IMG SRC  NEON O GIF   IMG SRC  NEON I GIF

Teuro [14.05.2009 18:27:10]

Jos mä olen nyt yhtään kärryillä ongelmasta, niin alla oleva koodilistaus voisi olla ratkaisu ongelmaasi. Tämä on lähes sama kuin Antin kirjoittaman oppaan listaus.

<?php
	/* lähetetään tunniste selaimelle */
	header("Content-type: image/png");

	$teksti = isset($_GET['teksti']) ? $_GET['teksti'] : "Vakioteksti";

	/* Lasketaan tekstin pituus */
	$pituus = 8 * strlen($teksti);
	$korkeus = 35;

	/* luodaan tekstin pituinen kuva */
	$kuva=imagecreate($pituus, $korkeus);

	/* määritetään taustaväri ja kaksi muuta väriä */
	$tausta=imagecolorallocate($kuva, 255, 255, 255);
	$musta=imagecolorallocate($kuva, 0, 0, 0);
	$sininen=imagecolorallocate($kuva, 0, 0, 255);

	/* piirretään kehykset ja teksti */
	imagerectangle($kuva, 0, 0, $pituus-1, $korkeus-1, $musta);
	imagestring($kuva, 2, 10, 10, $teksti, $sininen);

	/* lähetetään kuva PNG-muodossa */
	imagepng($kuva);

	/* poistetaan kuva muistista */
	imagedestroy($kuva);
?>

Rocceri [15.05.2009 11:02:35]

Teuron on parepi, mutta vielläkin on yksi ongelma. Tuo koodi luo kirjaimista yhden kuvan, mutta se ei reagoi kirjainten korvaukseen.
Nyt tämä luo kuvan missä on kirjoitettu teksti, mutta kirjainten kuuluisi olla korvattu vastaavilla kuvilla.

Teuro [15.05.2009 11:30:27]

Rocceri kirjoitti:

Teuron on parepi, mutta vielläkin on yksi ongelma. Tuo koodi luo kirjaimista yhden kuvan, mutta se ei reagoi kirjainten korvaukseen.
Nyt tämä luo kuvan missä on kirjoitettu teksti, mutta kirjainten kuuluisi olla korvattu vastaavilla kuvilla.

Rocceri kirjoitti:

Kun tässähän on monta kuvaa, niin saisiko PHP:llä kasattua monta kuvaa yhdeksi? Eli jos tuolla tekee tekstin KUVA, niin siinä on 4 kuvaa; K, U, V ja A, kun voisi olla yksi kuva; KUVA.

Pitääkö mun nyt mennä sisälukukurssille, vai miten tuo yllä oleva lainaus pitäisi tulkita?

Rocceri [15.05.2009 11:46:43]

Ensiksi kun luetaan tämä teksti "teksti" laatikosta, se asetetaan muuttujaan $teksti. Sen jälkeen katsotaan mikä fontti tyyli on valittu ja sen mukaan sitten valitaan kuvat.
A = a.gif B = b.gif jne.

<?php
//Otetaan teksti laatikosta "teksti" ja asetetaan muuttujaan $teksti
$teksti = $_POST["teksti"];
//Otetaan valinta "valitse" painikkeista ja asetetaan muuttujaan $valitse
$valitse = $_POST["valitse"];


//FONT NEON
if ($valitse == "neon") {
$tyyli = "neon";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="neon/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}

//FONT DIAMOND
elseif ($valitse == "diamond") {
$tyyli = "diamond";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="diamond/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}

//FONT ALPHA
elseif ($valitse == "alpha") {
$tyyli = "seka";
$teksti = strtolower($teksti);
    $uusi='';
    for ($i=0;$i<strlen($teksti);$i++) $uusi .= '<img src="seka/' . $teksti[$i] . '.gif">';
    $teksti=$uusi;
}


echo $teksti;
?>

Jos on kirjoitettu "moi" m kuuluisi korvata m.gif kuvalla, o o.gif ja i i.gif.
Sen jälkeen tarvitaan tuota sinun koodiasi.
Nämä 3 kuvaa (M, o ja i) pitäisi kasata yhdeksi kuvaksi MOI.
Mutta, sepä ei enään onnistukkaan. Kuvassa lukeekin vain MOI tavallisella fontilla. Eli, tuo ei tee koodi järjestyksessä (?) Se jättää välistä nuo kuva hommelit

trilog [15.05.2009 11:50:34]

Antin esimerkillä onnistunee, mutta copy-paste petti jälleen.

Rocceri [15.05.2009 12:17:52]

trilog kirjoitti:

Antin esimerkillä onnistunee, mutta copy-paste petti jälleen.

Joo, sain väännettyä toimimaan, mutta eri värisillä kirjaimilla tausta on vääränvärinen. Tekstigeneraattoriin!
Ja, mitenköhän saisi koot automaattisiksi, ettei tarvitse määrittää...

Rocceri [15.05.2009 16:42:25]

Jäi kysymykset pois viestistä:
1. Millaisella käskyllä saa mitat automaattisiksi? Tai voiko ne jättää pois?
2. Jos 0 0 0 on musta, niin mikä on valkoinen?

eq [15.05.2009 16:54:07]

Rocceri kirjoitti:

2. Jos 0 0 0 on musta, niin mikä on valkoinen? F F 0 0 0/F F 0?

Oletan, että puhut RGB-arvoista (musta olisi 0, 0, 0 myös esim. HSL-arvoilla). Kun värit ilmoitetaan punaisen, vihreän ja sinisen kombinaationa, valkoinen on "kaikki täysinä", eli esim. asteikolla 0-255 valkoinen on 255, 255, 255; tai heksadesimaalisena FF, FF, FF.

Rocceri [15.05.2009 17:12:39]

Kiitos eq, mutta viellä on tuo 1. kysymys jäljellä.

3. 1. tehtävän voi jättää väliin, jos joku tietää, miten voi saada valkoisen taustan venytetylle kuvalle. Eli jos on 45px levelä kuva ja se venytetään niin venytetylle alueelle tulee musta väri. Mustan voisi korvata valkoisella.

temu92 [15.05.2009 19:13:13]

Imagecopyresampled tai imagefilledrectangle.

Rocceri [15.05.2009 19:20:57]

temu92 kirjoitti:

Imagecopyresampled tai imagefilledrectangle.

Kiitos kiitos :)

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Kirjainten korvaus kuviksi

Rocceri [13.05.2009 18:48:44]

Grez [13.05.2009 18:55:44]

Rocceri [13.05.2009 19:00:41]

Tumettaja [13.05.2009 19:17:02]

Grez [13.05.2009 19:21:21]

kayttaja-2791 [13.05.2009 19:38:52]

tsuriga [13.05.2009 20:35:57]

jo123 [13.05.2009 21:42:43]

Niko [13.05.2009 23:41:39]

Rocceri [14.05.2009 13:48:59]

Metabolix [14.05.2009 13:57:19]

Rocceri [14.05.2009 14:22:35]

Metabolix [14.05.2009 14:30:39]

Antti Laaksonen [14.05.2009 14:37:46]

Rocceri [14.05.2009 15:15:54]

Merri [14.05.2009 16:45:43]

Metabolix [14.05.2009 17:25:25]

Teuro [14.05.2009 18:27:10]

Rocceri [15.05.2009 11:02:35]

Teuro [15.05.2009 11:30:27]

Rocceri [15.05.2009 11:46:43]

trilog [15.05.2009 11:50:34]

Rocceri [15.05.2009 12:17:52]

Rocceri [15.05.2009 16:42:25]

eq [15.05.2009 16:54:07]

Rocceri [15.05.2009 17:12:39]

temu92 [15.05.2009 19:13:13]

Rocceri [15.05.2009 19:20:57]

Vastaus