automatisch generiertes Bild aktualisieren (JQUERY)

Frank73 · 22. Februar 2011

Hallo zusammen,

und wiedermal stehe ich auf dem Schlauch.

Ich möchte ein Bild, welches aus den Daten eines Formulars erstellt wird, innerhalb des Div bild aktualisieren. Ich hatte mir das wie folgt gedacht:

Code:

..
..
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>

<div id="bild"></div>

<form name="blabla" method="GET" action="bildgenerator.php">
......
</form>

Laut dem was ich gelesen habe müsste ich nun folgendes im Formulat unterbringen:
$('#bild > img')[0].src = '****************>

Ich bin, was jquery betrifft nicht fit - brauche eine helfende Hand.

Vielleicht hat jemand eine Antwort auf mein problem.

Vielen Dank und liebe Grüße

Frank

Quaese · 23. Februar 2011

Hi,

ich weiss ja nicht, ob ich dein Problem richtig verstanden habe.

Du möchtest Eingaben aus dem Formular an ein Script senden, welches daraus ein Bild erstellt und an ein img-Objekt zurück gibt.

Dazu könntest du im submit-Event des Formulars die gewünschten Informationen an den Bildgenerator-URL anhängen und diesen dem src-Attribut des Bildes zuweisen.

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('form[name=blabla]').submit(function(evt){
    evt.preventDefault();
    var strUrl = "bildgenerator.php?img="+$('#img_src').val()+"&ts="+new Date().getTime();
    $('#bild').find('img:first').attr({
      'src': strUrl
    });
  });
});
 //-->
</script>
</head>
<body>
<div id="bild"><img src="bildgenerator.php?img=Default"></div>

<form name="blabla" method="GET" action="bildgenerator.php">
  <input type="text" id="img_src">
  <input type="submit">
</form>
</body>
</html>

bildgenerator.php

Code:

<?php
// Falls ein Text übergeben wurde
if(isset($_GET['img']) && ($_GET['img']!="")){
  $strInsert = $_GET['img'];
}else{
  $strInsert = "Default";
}

// Leeres Bild erzeuten und Text einfügen
$im = imagecreatetruecolor(120, 20);
$text_color = imagecolorallocate($im, 255, 255, 255);
imagestring($im, 3, 5, 3,  $strInsert, $text_color);

// Content-Type-Kopfzeile senden
header('Content-type: image/jpeg');

// Bild ausgeben
imagejpeg($im);

// Speicher freigeben
imagedestroy($im);
?>

Vielleicht hilft dir das weiter.

Ciao
Quaese

automatisch generiertes Bild aktualisieren (JQUERY)

Frank73

Mitglied

Quaese

Moderator

Neue Beiträge