Jump to content

Php created .png shown using string not using temp file


johnmunro

Recommended Posts

Hello,

 

We've been working on a page that allows users to create their own avatar to be displayed on their page.

 

We can get the script working but the only way to show the image is to  save it to a temp folder, we want to just save the string in the database and let the php show this wehen required here are the file

 

 

http://test.digitaldemocracy.org.uk/test_avatar.php

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="John Munro, Democratise Ltd" />

<meta name="copyright" content="Democratise Ltd 2010" />

<meta name="description" content="Digital Democracy -" />

<meta name="keywords" content=" add here" />

<meta name="robots" content="index, follow" />

<meta name="revisit-after" content="1 week" />

<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />

<link rel="SHORTCUT ICON" href="http://www.digitaldemocracy.co.uk/favicon.ico" />

<title>Digital Democracy -</title>

<link href="css/site.css" rel="stylesheet" type="text/css" />

<link href="css/basic.css" rel="stylesheet" type="text/css" />

 

 

<link rel="stylesheet" href="avatars/avatar.css" type="text/css" />

<script type="text/javascript" src="avatars/avatar.js"></script>

 

 

 

<style type="text/css">

/*<![CDATA[*/

<!--

body {

background-image: url(images/background_paper.jpg);

background-repeat: repeat;

}

-->

/*]]>*/

</style>

 

<script type="text/javascript">

//<![CDATA[

 

  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-15681567-1']);

  _gaq.push(['_trackPageview']);

 

  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();

 

//]]>

</script>

</head>

 

 

 

 

<body>

 

<div id="wrapper">

<div id="inner_wrapper">

 

<div class="header">

 

<div class="header_logo">

<img src="images/header_logo.png" width="190" height="55" alt="Digital Democracy" />

</div>

 

<div class="header_link">

Make a<br/>proposal

</div>

<div class="header_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="header_link">

View<br/>proposal

</div>

<div class="header_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="header_link">

Vote on top<br/>proposal

</div>

<div class="header_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="header_link">

View<br/>results

</div>

<div class="header_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="header_link_single_line">

Profile

</div>

<div class="header_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="header_link_single_line">

More

</div>

 

<div id="header_search_bar">

<form action="Search" method="post">

  <input name="Search" type="text" value="Search" size="15" />

  <input name="Submit" type="button" value="Go" />

</form>

</div>

 

<div class="header_login">

<span class="header_login_text">Login / Register</span>

</div>

 

</div>

 

 

 

 

 

 

<div id="info">

 

 

<div id="chosen_avatar">

 

<!--<p> avatar to be shown here when completed only - image shown below is thee to reference the saved code</p>-->

 

 

 

<p><img src="<?php if (!empty($image)) { echo $filename; } else { echo 'http://test.digitaldemocracy.org.uk/avatar_creator.php?avatar=bg_08&avatar[body]=body_01&avatar[head]=head_01&avatar[eyes]=blank&avatar[mouth]=blank&avatar[moustache]=blank&avatar[glasses]=blank&avatar[male_hair]=blank&avatar[female_hair]=blank';} ?>" title="Your chosen avatar (assembled as a PNG image)" alt="Your chosen avatar (PNG image)" /></p>

  <p>Your chosen avatar</p>

</div>

 

<form action="http://test.digitaldemocracy.org.uk/avatar_creator.php" method="get">

 

<div id="avatar_section">

 

<div id="avatar_stack">

<p>

<img src="avatars/bg_01.png" alt="" /><input name="avatar" type="radio" value="bg_01" checked="checked" />

<img src="avatars/bg_02.png" alt="" /><input name="avatar" type="radio" value="bg_02" />

<img src="avatars/bg_03.png" alt="" /><input name="avatar" type="radio" value="bg_03" />

<img src="avatars/bg_04.png" alt="" /><input name="avatar" type="radio" value="bg_04" />

<img src="avatars/bg_05.png" alt="" /><input name="avatar" type="radio" value="bg_05" />

<img src="avatars/bg_06.png" alt="" /><input name="avatar" type="radio" value="bg_06" />

<img src="avatars/bg_07.png" alt="" /><input name="avatar" type="radio" value="bg_07" />

<img src="avatars/bg_08.png" alt="" /><input name="avatar" type="radio" value="bg_08" />

<img src="avatars/bg_09.png" alt="" /><input name="avatar" type="radio" value="bg_09" />

</p>

 

<p>

<img src="avatars/body_01.png" alt="" /><input name="avatar[body]" type="radio" value="body_01" checked="checked" />

<img src="avatars/body_02.png" alt="" /><input name="avatar[body]" type="radio" value="body_02" />

<img src="avatars/body_03.png" alt="" /><input name="avatar[body]" type="radio" value="body_03" />

<img src="avatars/body_04.png" alt="" /><input name="avatar[body]" type="radio" value="body_04" />

<img src="avatars/body_05.png" alt="" /><input name="avatar[body]" type="radio" value="body_05" />

<img src="avatars/body_06.png" alt="" /><input name="avatar[body]" type="radio" value="body_06" />

<img src="avatars/body_07.png" alt="" /><input name="avatar[body]" type="radio" value="body_07" />

<img src="avatars/body_08.png" alt="" /><input name="avatar[body]" type="radio" value="body_08" />

</p>

 

 

<p>

<img src="avatars/head_01.png" alt="" /><input name="avatar[head]" type="radio" value="head_01" checked="checked" />

<img src="avatars/head_02.png" alt="" /><input name="avatar[head]" type="radio" value="head_02" />

<img src="avatars/head_03.png" alt="" /><input name="avatar[head]" type="radio" value="head_03" />

<img src="avatars/head_04.png" alt="" /><input name="avatar[head]" type="radio" value="head_04" />

<img src="avatars/head_05.png" alt="" /><input name="avatar[head]" type="radio" value="head_05" />

<img src="avatars/head_06.png" alt="" /><input name="avatar[head]" type="radio" value="head_06" />

<img src="avatars/head_07.png" alt="" /><input name="avatar[head]" type="radio" value="head_07" />

<img src="avatars/head_08.png" alt="" /><input name="avatar[head]" type="radio" value="head_08" />

</p>

 

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[eyes]" type="radio" value="blank" checked="checked" />

<img src="avatars/eyes_1.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_1" />

<img src="avatars/eyes_2.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_2" />

<img src="avatars/eyes_3.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_3" />

<img src="avatars/eyes_4.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_4" />

<img src="avatars/eyes_5.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_5" />

<img src="avatars/eyes_6.png" alt="" /><input name="avatar[eyes]" type="radio" value="eyes_6" />

</p>

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[mouth]" type="radio" value="blank" checked="checked" />

<img src="avatars/mouth_1.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_1" />

<img src="avatars/mouth_2.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_2" />

<img src="avatars/mouth_3.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_3" />

<img src="avatars/mouth_4.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_4" />

<img src="avatars/mouth_5.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_5" />

<img src="avatars/mouth_6.png" alt="" /><input name="avatar[mouth]" type="radio" value="mouth_6" />

</p>

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[moustache]" type="radio" value="blank" checked="checked" />

<img src="avatars/moustache_01.png" alt="" /><input name="avatar[moustache]" type="radio" value="moustache_01" />

<img src="avatars/moustache_02.png" alt="" /><input name="avatar[moustache]" type="radio" value="moustache_02" />

<img src="avatars/moustache_03.png" alt="" /><input name="avatar[moustache]" type="radio" value="moustache_03" />

<img src="avatars/moustache_04.png" alt="" /><input name="avatar[moustache]" type="radio" value="moustache_04" />

</p>

 

 

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[glasses]" type="radio" value="blank" checked="checked" />

<img src="avatars/glasses_01.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_01" />

<img src="avatars/glasses_02.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_02" />

<img src="avatars/glasses_03.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_03" />

<img src="avatars/glasses_04.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_04" />

<img src="avatars/glasses_05.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_05" />

<img src="avatars/glasses_06.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_06" />

<img src="avatars/glasses_07.png" alt="" /><input name="avatar[glasses]" type="radio" value="glasses_07" />

</p>

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[hair 1]" type="radio" value="blank" checked="checked" />

<img src="avatars/m_hair_01.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_01" />

<img src="avatars/m_hair_02.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_02" />

<img src="avatars/m_hair_03.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_03" />

<img src="avatars/m_hair_04.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_04" />

<img src="avatars/m_hair_05.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_05" />

<img src="avatars/m_hair_06.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_06" />

<img src="avatars/m_hair_07.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_07" />

<img src="avatars/m_hair_08.png" alt="" /><input name="avatar[hair 1]" type="radio" value="m_hair_08" />

</p>

 

<p>

<img src="avatars/blank.png" alt="" /><input name="avatar[hair 2]" type="radio" value="blank" checked="checked" />

<img src="avatars/f_hair_01.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_01" />

<img src="avatars/f_hair_02.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_02" />

<img src="avatars/f_hair_03.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_03" />

<img src="avatars/f_hair_04.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_04" />

<img src="avatars/f_hair_05.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_05" />

<img src="avatars/f_hair_06.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_06" />

<img src="avatars/f_hair_07.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_07" />

<img src="avatars/f_hair_08.png" alt="" /><input name="avatar[hair 2]" type="radio" value="f_hair_08" />

</p>

 

 

</div>

 

</div>

 

<p> </p>

 

<p id="submit" >

<input type="submit" value="Click here to save your personalised Avatar" />

</p>

 

</form>

 

 

 

 

<div id="hidden_spacer">

<p> </p>

</div>

 

 

 

</div>

 

 

 

 

</div>

</div>

 

 

 

 

 

<div class="footer">

 

<div class="footer_content">

<div id="footer_democratise">

  © Democratise Ltd

</div>

 

<div class="footer_link_single_line">

About us

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Contact

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Blog

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Help

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Facebook

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Twitter

</div>

<div class="footer_link_spacer">

<img src="images/header_link_spacer.png" width="5" height="55" alt="Digital Democracy - Link Spacer image" />

</div>

 

<div class="footer_link_single_line">

Privacy

</div>

 

</div>

</div>

 

 

</body>

</html>

   

   

And the file that runs the php and creates the images is

 

<?php

 

 

 

# form inputs in the correct stacking order from bottom to top

 

$form_fields = array('background', 'body', 'head', 'eyes', 'mouth', 'moustache', 'glasses', 'hair 1', 'hair 2');

 

 

 

ob_start();

 

if(!isset($_GET['avatar'])) die;

 

validate_inputs($form_fields);

 

$filename = create_avatar($form_fields);

//ob_end_clean();

 

//echo "hello";

 

//$image = output_image(ob_get_clean());

$image_output = ob_get_contents();

//ob_end_clean();

 

//echo $image;

//$image = ob_get_contents();

 

//$image="data:image/png;base64, base64_encode($image)";

$image = 'test.digitaldemocracy.org.uk' . $_SERVER['REQUEST_URI'];

//$image = $_SERVER['REQUEST_URI'];

//echo $image;

 

 

 

 

function validate_inputs($inputs)

 

{

 

    foreach($inputs as $item)

 

    {

 

        if((preg_match('@(\.|/)@', $_GET['avatar'][$item]))

 

        or (!is_file('avatars/'.$_GET['avatar'][$item].'.png')))

 

        {

 

            die();

 

        }

 

    }

 

}

 

 

 

function create_avatar($inputs)

 

{

 

    while($inputs)

 

    {

 

        $layer = @imagecreatefrompng('avatars/'.

 

                ($file = $_GET['avatar'][array_shift($inputs)]).

 

                '.png')

 

                or die('I could not open the avatars/'.$file);

 

        $layerWidth = imageSX($layer);

 

        $layerHeight = imageSY($layer);

 

        if(!isset($slate))

 

        {

 

            $slate = @imagecreatetruecolor($layerWidth, $layerHeight);

 

        }

 

        @imagecopy($slate, $layer, 0, 0, 0, 0, $layerWidth, $layerHeight);

 

        @imagedestroy($layer);

 

    }

 

 

    imagetruecolortopalette ($slate, false, 256);

 

//header('Content-Type: image/png');

$filename = 'temp'. rand(1,50) . '.png';

 

    imagepng($slate, $filename);

//imagepng($slate);

 

 

    imagedestroy($slate);

 

return $filename;

 

}

 

 

 

function output_image($image)

 

{

 

    $hash = md5($image);

 

    if(isset($_SERVER['HTTP_IF_NONE_MATCH'])){

 

        if($hash == trim($_SERVER['HTTP_IF_NONE_MATCH'], '"')){

 

            header("HTTP/1.x 304 Not Modified");

 

            header('Etag: "'.$hash.'"');

 

            die();

 

        }

 

    }

 

    //header('Etag: "'.$hash.'"');

 

  //header('Content-Type: image/png');

 

//imagepng($image);

    //echo $image;

//return $image;

 

}

 

//header ("Location:test_avatar.php?image=$image");

 

include 'test_avatar.php';

 

 

?>

 

 

If anybody can help us it would be very appreciated

 

Thanks

 

John Munro

Democratise.org

 

 

Link to comment
Share on other sites

...the only way to show the image is to save it to a temp folder, we want to just save the string in the database...

 

So....what you're saying is you want to store the actual image in the database?  That is more work than necessary.  I assume that's not what you mean and that you really just want to store the file's location in the database...like '/public_html/data/images/myavatar.jpg'.  Even if that's the case you'd still need to actually store the image in that folder (which contradicts your assertion that you "JUST" want to store the string in the database).  You need to move the uploaded file to a directory which your database string will refer to so that the < img > tag can reference that image.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.