Avatar billede gedekid Nybegynder
02. august 2011 - 15:20 Der er 6 kommentarer og
1 løsning

Fetche en url med AJAX og bruge den i PHP

Hej eksperter,

jeg er lidt i vildrede med en ting som jeg håber nogle kan jeg hjælpe mig.
Jeg leder efter noget AJAX (jQuery) der kan fetche en url med de forskellige queries som jeg så derefter kan bruge i PHP og til sidst indlæse det genererede i en enkelt div boks uden at skulle refreshe hele siden.

Lad mig uddybe :)

Jeg har f.eks. denne url:

index.php?page=sw&room=livingroom&floor=ask&wall=white

Jeg vil så gerne fetche denne url og bruge de 4 værdier i en billedgenerator (er lavet og funker) og når det billede så er genereret vil jeg gerne loade det i en div box, eks. #billedet

Jeg vil gerne have det på denne måde da jeg i siden af mit layout har en anden boks med forskellige farver som kan åbnes og lukkes. I den boks har man så mulighed for at enten at vise en farve hvor der så bliver genereret et billede med den valgte farve hvor boksen så stadig skal være åben for at se en anden farve, eller man kan klikke OK når man er tilfreds og farveboksen lukker og man fortsætter til næste trin.

Som jeg har det nu så refresher siden også når man blot vil se en farve og så lukker boksen da den som standard er sat til display: none

Håber der er nogle der kan hjælpe.
Avatar billede majbom Novice
02. august 2011 - 20:04 #1
kan du ikke lave en php-fil der genererer billedet ud fra de parametre (som du tilsyneladende har fået til at virke) og bruge den som billed-fil og så sætte src-attributen på et img-element til denne php-fil med parametre vha javascript?

f.eks.


<script type="text/javascript">
  function changeImg(strElm, strSrc)
  {
      document.getElementById(strElm).setAttribute("src", strSrc);
  }
</script>


<img src="mit_billede.php" alt="" id="mit_billede">
<button onclick="changeImg('mit_billede', 'mit_billede.php?page=sw&room=livingroom&floor=ask&wall=white')">Skift</button>


utestet...
Avatar billede gedekid Nybegynder
03. august 2011 - 09:01 #2
Det ser umiddelbart ud til at det kan klare problemet for mig, relativt nemt! Og den kan jeg vist bruge til alle parametre.

Men jeg har dog et lille problem... Når jeg kører http://localhost/gulv/img.php?page=sw&room=office&floor=asknaturhvidmat&wall=hvid&envi=couch i browseren, så får jeg blot en blank side, og med <img src="mit_billede.php" alt="" id="mit_billede"> får jeg det velkendte røde kryds, men billedet bliver genereret! Er der noget jeg har kikset et sted? Nedenunder kommer der lige en smørre med min generator:

### GENERATOR ###

<?php
class ImageGenerator extends Main {
   
    var $width;
    var $height;
    var $quality = 100;
    var $fileName = "";
   
    /*******************************************************************************
    * This is the imagebuilder function that builds the image
    * based on different userselections
    *
    * $fullFileName        | The filename of the image with entire path
    * $theRoom             | The selected room.
    * $theFloor            | The selected floor
    * $theWall             | The selected wallpaper
    * $theEnvi            | The selected furnitures
    * $theLang             | The language from $_GET
    * $theXSize            | The width of the final image
    * $theYSize            | The height of the final image
    * $fullSize         | Bool value - If the generated image is fullsize or not
    *                      - true or false - true is the fullsize image in new window
    *******************************************************************************/

    function imageBuilder($theRoom, $theFloor, $theWall, $theEnvi, $theLang, $theXSize, $theYSize, $fullSize) {                               
           
        $quality = 100; //Final image quality
        $theW = $theXSize; //The width of final image
        $theH = $theYSize; //The height of final image
       
        /*** Beginning of language variabels ***/
       
        $dateLabel = Main::langLabels($theLang, "date") .": ";
        $roomLabel = Main::langLabels($theLang, "room") .": ";
               
        /*** The path of the selected room ***/
        $thePath = "rooms/".$theRoom."";

        /*** The filename of the generated image ***/
        if($fullSize == true) {
            $theImageFileName = "generatedImages/room-". $theRoom ."_floor-". $theFloor ."_wall-". $theWall ."_envi-". $theEnvi ."_".$theLang."-full.jpg";
        } else {
            $theImageFileName = "generatedImages/room-". $theRoom ."_floor-". $theFloor ."_wall-". $theWall ."_envi-". $theEnvi ."_".$theLang.".jpg";
        }
               
        /*** Check if the default background exists ***/
        if(file_exists($thePath."/bg.png")) {
            $theBackgroundImage = imagecreatefrompng($thePath."/bg.png");
            $theSourceImagesXSize = imagesx($theBackgroundImage);
            $theSourceImagesYSize = imagesy($theBackgroundImage);
        }
       
        /*******************************************************
        * Here the selected floor are placed onto the image
        ********************************************************/
        $theFloor = $theFloor;
       
        if (file_exists($thePath."/floors/".$theFloor.".png")) {
            $createFromThis = $thePath."/floors/".$theFloor.".png";
        } else {
              $createFromThis = $thePath."/blank.png";
        }
       
        $theFloorImage = imagecreatefrompng($createFromThis);
       
        imagecopy($theBackgroundImage,$theFloorImage,0,0,0,0,$theSourceImagesXSize,$theSourceImagesYSize);
       
        imagejpeg($theFloorImage, $theImageFileName, $quality);
        imagedestroy($theFloorImage);
       
        /*******************************************************
        * Here the selected wallpaper are placed onto the image
        ********************************************************/
        $theWall = $theWall;
   
        if (file_exists($thePath."/walls/".$theWall.".png")) {
            $createFromThis = $thePath."/walls/".$theWall.".png";
        } else {
            $createFromThis = $thePath."/walls/blank.png";
        }
         
        $theWallImage = imagecreatefrompng($createFromThis);
        imagecopy($theBackgroundImage,$theWallImage,0,0,0,0,$theSourceImagesXSize,$theSourceImagesYSize);
        imagedestroy($theWallImage);
       
        /*******************************************************
        * Here the selected furnitures are placed onto the image
        ********************************************************/
        $theEnvi = $theEnvi;
   
        if (file_exists($thePath."/furnitures/".$theEnvi.".png")) {
            $createFromThis = $thePath."/furnitures/".$theEnvi.".png";
        } else {
            $createFromThis = $thePath."/furnitures/blank.png";
        }
         
        $theEnviImage = imagecreatefrompng($createFromThis);
        imagecopy($theBackgroundImage,$theEnviImage,0,0,0,0,$theSourceImagesXSize,$theSourceImagesYSize);
        imagedestroy($theEnviImage);
       
        /*******************************************************
        * Here the logo are printed onto the image
        *
        * $theLogo        | The path of the logo
        * $theLogoX        | Finds the width of the logo
        * $theLogoY        | Finds the height of the logo
        ********************************************************/
        $theLogo = imagecreatefrompng("logo_trans.png");
        $theLogoX = imagesx($theLogo);
        $theLogoY = imagesy($theLogo);
        imagecopy($theBackgroundImage,$theLogo,10,10,0,0,$theLogoX,$theLogoY);
        imagedestroy($theLogo);
       
        /*******************************************************
        * At this stage in the image creation a box is
        * generated and placed at the bottom of the image.
        * In that box the date are written in the right side
        * In the left side the different selections are written
        ********************************************************/
        $selectionTxt = Main::langLabels($theLang, "room").": ". Main::langLabels($theLang, $theRoom) ." | ". Main::langLabels($theLang, "wall").": ". $theWall ." | ". Main::langLabels($theLang, "environment").": ". $theEnvi;
        $dateTxt = Main::langLabels($theLang, "date").": ". date("d-m-Y");
       
        imagefilledrectangle($theBackgroundImage, 0, 940, 1280, 960, imagecolorallocatealpha($theBackgroundImage, 0,0,0, 60));       
        imagettftext($theBackgroundImage, 8, 0, 1172, 953, imagecolorallocate($theBackgroundImage, 209,198, 140), "verdana.ttf", $dateTxt);
        imagettftext($theBackgroundImage, 8, 0, 20, 953, imagecolorallocate($theBackgroundImage, 209,198, 140), "verdana.ttf", $selectionTxt);
       
        /*******************************************************
        * Here the final image is generated based on
        * width and height defined in top of this script
        *
        * $theDestionationImage        | The final image
        * $theBackgroundImage        | The total images with all
        *                               the layers combined
        ********************************************************/
        $theDestinationImage = imagecreatetruecolor($theW,$theH);
        imagecopyresampled($theDestinationImage,$theBackgroundImage,0,0,0,0,$theW,$theH,$theSourceImagesXSize,$theSourceImagesYSize);
        imagealphablending($theDestinationImage, true);
       
        /*******************************************************
        * Output the final image and clear the memory
        ********************************************************/
        imagejpeg($theDestinationImage, $theImageFileName, $quality);
        imagedestroy($theDestinationImage);

        return;
    }
}

?>
Avatar billede gedekid Nybegynder
03. august 2011 - 09:04 #3
Min img.php ser således ud:

<?php
define("INCLUDE_DIR", "includes/classes");

/* Autoload classes when used */
function __autoload($class_name) {
  include(INCLUDE_DIR.'/class.'. strtolower($class_name) . '.php');
}

/**********************************************
* Check whether a fullsize image have been
* chosen.
*
* $fullSize        | $_GET is either true or false
* $theXSize        | The width of the image
* $theYSize        | The height of the image
***********************************************/
if(isset($_GET["fs"]) ? $fullSize = $_GET["fs"] : $fullSize = false);

/* Checks if fullsize is true and if it is,
-full will be inserted in the final filename */

if($fullSize == true) {
    $theXSize     = 1024;
    $theYSize    = 768;
} else {
    $theXSize     = 700;
    $theYSize    = 700/960*$theXSize;
}

$img = new ImageGenerator();
$img->imageBuilder($_GET["room"], $_GET["floor"], $_GET["wall"], $_GET["envi"], "dk", $theXSize, $theYSize, $fullSize, false);

?>
Avatar billede majbom Novice
03. august 2011 - 10:55 #4
jeg er ikke ret meget inde i det med generering af billeder, men der skal i hvert fald en header på din img-fil, så browseren ved at der er tale om et billede:

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


i toppen af dokumentet
Avatar billede gedekid Nybegynder
03. august 2011 - 11:45 #5
Den har jeg sat, men får samme resultat! Jeg spørger lige i PHP afdelingen! Vil du smide et svar, så er der point!

Tak for hjælpen!
Avatar billede majbom Novice
03. august 2011 - 12:37 #6
imagejpeg($theDestinationImage, $theImageFileName, $quality);

gemmer jo også billedet som en fil - det bliver ikke "vist"
Avatar billede majbom Novice
03. august 2011 - 13:04 #7
tfp :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester