Page 1 of 1

Saving a .png iimage made up using php to a MySQL database

Posted: Mon Dec 06, 2010 4:44 am
by johnmunro
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/ava ... air]=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[background]" type="radio" value="bg_01" checked="checked" />
<img src="avatars/bg_02.png" alt="" /><input name="avatar[background]" type="radio" value="bg_02" />
<img src="avatars/bg_03.png" alt="" /><input name="avatar[background]" type="radio" value="bg_03" />
<img src="avatars/bg_04.png" alt="" /><input name="avatar[background]" type="radio" value="bg_04" />
<img src="avatars/bg_05.png" alt="" /><input name="avatar[background]" type="radio" value="bg_05" />
<img src="avatars/bg_06.png" alt="" /><input name="avatar[background]" type="radio" value="bg_06" />
<img src="avatars/bg_07.png" alt="" /><input name="avatar[background]" type="radio" value="bg_07" />
<img src="avatars/bg_08.png" alt="" /><input name="avatar[background]" type="radio" value="bg_08" />
<img src="avatars/bg_09.png" alt="" /><input name="avatar[background]" 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>&nbsp;</p>

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

</form>




<div id="hidden_spacer">
<p>&nbsp;</p>
</div>



</div>




</div>
</div>





<div class="footer">

<div class="footer_content">
<div id="footer_democratise">
&copy; 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

Re: Saving a .png iimage made up using php to a MySQL databa

Posted: Mon Dec 06, 2010 5:15 am
by curlybracket
It's very hard to read your code: it's much too long and you didn't use

Code: Select all

 tags to highlight it. 
If you need to store image in db this may help: http://www.qtcentre.org/threads/24261-how-to-save-a-image-file-(-say-png-)-into-mysql-database