Saving Images

[rohit_purohit]

Hello Every Body

I Am Using PHP AND JAVASCRIPT

i am using two images on my page
at run time
1. first i drag one image on another
2. after that i write some text using a prompt box which is written on the dragged image at run time
3. Nw at runtime i want to save this final image as a jpg image
which looks like above file

can any one Help Me

[TimFA]

You say your using JavaScript and PHP does that mean you already have something started? If you do please post it. Are you asking for the whole thing to be made or just the Js/PHP part? Js=dragging and stuff, PHP=saving it.

Tim

[jackbenimble4]

Like TimFA said, please show anything you have started. If it's posted publicly, it'd be great if we could have a link.

I've done some image manipulation using a combination of php & ajax before. I avoided using drag and drop because of the complexity and how difficult I knew it'd be to sync with the PHP gd coordinates. My solution took coordinates and text and used ajax to save the information to the database. Once a response was received from the server, the javascript refreshed the image which was dynamic in the sense that the output was controlled by a php script. The php script fetched the elements from the database, and used the GD library to display them on the image, and return that image. That way, whenever they made a change the image was reloaded.

Before you continue, make sure you're ready to put in the work. If you want to see, here's the source of the javascript I used for my script: javascript.js

Here's what the php file that returned the image looked like:

<?php

include("global_streamlined.php");
if(!$_GET['t']) {
    exit;
}

if(!$userinfo['gamertag'] OR !$gamerinfo['id']) {
    // display error card or something
    die("error");
    exit;
}

$ref = strtolower($_SERVER['HTTP_REFERER']);
$allowed = array("http://gamercardcreator.com", "http://www.gamercardcreator.com", "http://images.google.com", "http://www.images.google.com", "http://xboxamerica.com", "http://www.xboxamerica.com");
$hotlinking = true;
foreach($allowed as $key => $url) {
    $len = strlen($url);
    if(substr($url, 0, $len) == $url) {
        $hotlinking = false; // it's not hotlinked... let's let them see it
    }
}
if($hotlinking == true) {
	die("No Hotlinking!");
    exit; // display no hotlnking image... or just quit
}


header("Cache-Control: no-cache, must-revalidate");
header("Content-type: image/png");

$lastPlayedGame = query("SELECT * FROM xboxamer_xboxamerica.xbox_games_cache WHERE userid='".$userinfo['userid']."' ORDER BY number ASC LIMIT 1",1);

$textReplacements = array(
    "gamertag" => $gamerinfo['gamertag'],
    "gamerscore" => $gamerinfo['score'],
    "zone" => $gamerinfo['zone'],
    "rep_pct" => round($gamerinfo['reputation'],2),
    "overall_rank" => $gamerinfo['rank'].ordinal($gamerinfo['rank']),
    "state_rank" => $gamerinfo['staterank'].ordinal($gamerinfo['staterank']),
    "state_name" => $userinfo['statename'],
    "state_abbrev" => $userinfo['stateabbrev'],
    "last_played_name" => $lastPlayedGame['name'],
    "game_score_pct" => round(($lastPlayedGame['gamerscore']/$lastPlayedGame['totalgamerscore'])*100,2),
    "game_score" => $lastPlayedGame['gamerscore'],
    "game_total" => $lastPlayedGame['totalgamerscore']);
    

$template = query("SELECT * FROM templates WHERE hash='".$_GET['t']."'",1);

if(!$template['templateid']) {
    die("no template id");
}

if($template['complete'] == 0) {
    if($userinfo['userid'] != $template['userid']) {
        exit;
    }
}


$image = ImageCreateTrueColor($template['width'],$template['height']);

$testColor = imagecolorallocate($image,255,0,0);

$bg = @imagecreatefrompng("./backgrounds/".$template['background']);
@imagesettile($image, $bg);
@ImageFilledRectangle($image,0,0,$template['width'], $template['height'],IMG_COLOR_TILED);

// get elements
$getElements = query("SELECT * FROM elements WHERE templatehash='".$_GET['t']."'");
while($el = mysql_fetch_array($getElements)) {
    if($el['type'] == "text") {
        $colorIndex = imagecolorallocate($image,$el['r'],$el['g'],$el['b']);
        
        foreach($textReplacements as $search => $replace) {
            $el['string'] = str_replace('%'.$search.'%', $replace, $el['string']); 
        }
        imagettftext($image,$el['size'],$el['angle'],$el['xpos'],$el['ypos'],$colorIndex,'./fonts/'.$el['font'],stripslashes($el['string']));
        
    } elseif($el['type'] == "gamerpic") {
        // get that damn gamerpic
        if(!isset($defaultGamerpic)) {
            if(!$gamerinfo['tile64filename']) {
                // either load a fake one... or we could just quit
                $defaultGamerpic = imagecreatefrompng("cache/tiles/64/YN-LP-0Gdsb2JhbC9FClZWVEoAGAFdL3RpbGUvMC8yMDAwMQAAAAAAAAD-4NJA.png");
            } else {
                $defaultGamerpic = imagecreatefrompng("cache/tiles/64/".$gamerinfo['tile64filename']);
            }
        }
        
        if(!isset($resizedGamerpic[$el['width']])) {
            if($el['width'] != 64) {
        
                $resizedGamerpic[$el['width']] = imagecreatetruecolor($el['width'],$el['height']);
                imagecopyresized($resizedGamerpic[$el['width']],$defaultGamerpic,0,0,0,0,$el['width'],$el['height'],64,64);
            }
        }
        
        if($el['width'] == 64) {
            imagecopy($image,$defaultGamerpic,$el['xpos'],$el['ypos'],0,0,64,64);
        } else {
            imagecopy($image,$resizedGamerpic[$el['width']],$el['xpos'],$el['ypos'],0,0,$el['width'],$el['height']);
        }
    } elseif($el['type'] == "gameicon") {
        // we can keep down on queries if we gather info for ALL the games now, and then reference that every other time we get an element that's a gameicon. deal?
        
        if(!$gamesInfo) {
            // no info... let's grab those games!
            $grabGames = query("SELECT * FROM xbox_games_cache WHERE userid='".$userinfo['userid']."' LIMIT 16");
            while($game = mysql_fetch_array($grabGames)) {
                $gamesInfo[$game['number']] = $game;
            }
        }
        
        $gamesInfo[$el['gameicon_number']][$el['width'].'ref'] = imagecreatefrompng("cache/gameicons/".$el['width']."/".$gamesInfo[$el['gameicon_number']]['filename'.$el['width']]);
        imagecopy($image,$gamesInfo[$el['gameicon_number']][$el['width'].'ref'],$el['xpos'],$el['ypos'],0,0,$el['width'],$el['height']);
        
    } elseif($el['type'] == "gsicon") {
        if(!$gsicon) {
            $gsicon = imagecreatefromgif('gamercardcreator/components/presets/G_Icon_External.gif');
        }
        
        imagecopy($image,$gsicon,$el['xpos'],$el['ypos'],0,0,13,12);
    } elseif($el['type'] == "repstars") {
        if(!$repstars) {
            $repstars = imagecreatefromgif('gamercardcreator/components/repstars/gc_repstars_external_'.$gamerinfo['reputationbucket'].'.gif');
        }
        
        imagecopy($image, $repstars, $el['xpos'],$el['ypos'],0,0,65,10);
    }
}

ImagePNG($image);
ImageDestroy($image);

?>