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

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
johnmunro
Forum Newbie
Posts: 1
Joined: Mon Dec 06, 2010 4:37 am

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

Post 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
curlybracket
Forum Commoner
Posts: 59
Joined: Mon Nov 29, 2010 2:40 pm

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

Post 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
Post Reply