I am using a PHP script which creates headings at run time in a sense at page execution. I am stuck a with a very little problem which i am sure i will have the solution from experts.
The problem is when it creates transparent PNG format image then and it pixel ate the image. e.g.
If i am using a gradient in background then it vary in color range. Now when i used that php script it generates image successfully but it pixel ate the image.
So my question how can i fix that. i am attaching the code which i am using for that and a *.jpg of screen shot for better understanding of my problem.
generate-headings.php Page
Expand|Select|Wrap|Line Numbers
- $font_file = 'fonts/arial.ttf' ;
- $font_size = 20 ;
- $font_color = '#ffffff' ;
- $background_color = '#ffffff' ;
- $transparent_background = true ;
- $cache_images = true ;
- $cache_folder = 'cache' ;
- $mime_type = 'image/png' ;
- $extension = '.png' ;
- $send_buffer_size = 4096 ;
- $text = $_GET['text'];
- if(get_magic_quotes_gpc()){
- $text = stripslashes($text) ;
- }
- $text = javascript_to_html($text) ;
- // look for cached copy, send if it exists
- $hash = md5(basename($font_file) . $font_size . $font_color . $background_color . $transparent_background . $text) ;
- $cache_filename = $cache_folder . '/' . $hash . $extension ;
- if($cache_images && ($file = @fopen($cache_filename,'rb'))){
- header('Content-type: ' . $mime_type) ;
- while(!feof($file))
- print(($buffer = fread($file,$send_buffer_size))) ;
- fclose($file) ;
- exit ;
- }
- // check font availability
- $font_found = is_readable($font_file) ;
- if(!$font_found){
- //fatal_error('Error: The server is missing the specified font.') ;
- }
- // create image
- $background_rgb = hex_to_rgb($background_color) ;
- $font_rgb = hex_to_rgb($font_color) ;
- $dip = get_dip($font_file,$font_size) ;
- $box = @ImageTTFBBox($font_size,0,$font_file,$text) ;
- $image = @ImageCreate(abs($box[2]-$box[0]),abs($box[5]-$dip)) ;
- if(!$image || !$box){
- fatal_error('Error: The server could not create this heading image.') ;
- }
- // allocate colors and draw text
- $background_color = @ImageColorAllocate($image,$background_rgb['red'],$background_rgb['green'],$background_rgb['blue']) ;
- $font_color = ImageColorAllocate($image,$font_rgb['red'],$font_rgb['green'],$font_rgb['blue']) ;
- ImageTTFText($image,$font_size,0,-$box[0],abs($box[5]-$box[3])-$box[1],$font_color,$font_file,$text) ;
- // set transparency
- if($transparent_background)
- ImageColorTransparent($image,$background_color) ;
- header('Content-type: ' . $mime_type) ;
- ImagePNG($image) ;
- // save copy of image for cache
- if($cache_images){
- @ImagePNG($image,$cache_filename) ;
- }
- ImageDestroy($image) ;
- exit ;
- /*$im = imagecreatetruecolor(300, 18);
- $white = imagecolorallocate($im, 255, 255, 255);
- $black = imagecolorallocate($im, 0, 0, 0);
- imagefilledrectangle($im, 0, 0, imagesx($im), imagesy($im), gd_bkg());
- $text = $_GET[hd];
- $font = "fonts/Abduction.ttf";
- imagettftext($im,14,0,0,13,$black,$font,$text);
- imagepng($im);
- imagedestroy($im);
- $background_rgb = hex_to_rgb($background_color) ;
- $background_color = @ImageColorAllocate($image,$background_rgb['red'],*/
- //=============================== FUNCTIONS =================
- function javascript_to_html($text){
- $matches = null ;
- preg_match_all('/%u([0-9A-F]{4})/i',$text,$matches) ;
- if(!empty($matches)) for($i=0;$i<sizeof($matches[0]);$i++)
- $text = str_replace($matches[0][$i],'&#'.hexdec($matches[1][$i]).';',$text) ;
- return $text ;
- }
- function hex_to_rgb($hex){
- // remove '#'
- if(substr($hex,0,1) == '#')
- $hex = substr($hex,1) ;
- // expand short form ('fff') color
- if(strlen($hex) == 3){
- $hex = substr($hex,0,1) . substr($hex,0,1) . substr($hex,1,1) . substr($hex,1,1) . substr($hex,2,1) . substr($hex,2,1) ;
- }
- if(strlen($hex) != 6)
- fatal_error('Error: Invalid color "'.$hex.'"') ;
- // convert
- $rgb['red'] = hexdec(substr($hex,0,2)) ;
- $rgb['green'] = hexdec(substr($hex,2,2)) ;
- $rgb['blue'] = hexdec(substr($hex,4,2)) ;
- return $rgb ;
- }
- function get_dip($font,$size){
- $test_chars = 'abcdefghijklmnopqrstuvwxyz' .
- 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' .
- '1234567890' .
- '!@#$%^&*()\'"\\/;.,`~<>[]{}-+_-=' ;
- $box = @ImageTTFBBox($size,0,$font,$test_chars) ;
- return $box[3] ;
- }
Expand|Select|Wrap|Line Numbers
- function com_stewartspeak_replacement() {
- /*
- Dynamic Heading Generator
- By Stewart Rosenberger
- http://www.stewartspeak.com/headings/
- This script searches through a web page for specific or general elements
- and replaces them with dynamically generated images, in conjunction with
- a server-side script.
- */
- replaceSelector("h2","generate-headings.php",true);
- var testURL = "http://bytes.com/images/test.png" ;
- var doNotPrintImages = false;
- var printerCSS = "includes/replacement-print.css";
- var hideFlicker = false;
- var hideFlickerCSS = "includes/replacement-screen.css";
- var hideFlickerTimeout = 1000;
- /* ---------------------------------------------------------------------------
- For basic usage, you should not need to edit anything below this comment.
- If you need to further customize this script's abilities, make sure
- you're familiar with Javascript. And grab a soda or something.
- */
- var items;
- var imageLoaded = false;
- var documentLoaded = false;
- function replaceSelector(selector,url,wordwrap){
- if(typeof items == "undefined")
- items = new Array();
- items[items.length] = {selector: selector, url: url, wordwrap: wordwrap};
- }
- if(hideFlicker)
- {
- document.write('<link id="hide-flicker" rel="stylesheet" media="screen" href="' + hideFlickerCSS + '" />');
- window.flickerCheck = function()
- {
- if(!imageLoaded)
- setStyleSheetState('hide-flicker',false);
- };
- setTimeout('window.flickerCheck();',hideFlickerTimeout)
- }
- if(doNotPrintImages)
- document.write('<link id="print-text" rel="stylesheet" media="print" href="' + printerCSS + '" />');
- var test = new Image();
- test.onload = function() { imageLoaded = true; if(documentLoaded) replacement(); };
- test.src = testURL + "?date=" + (new Date()).getTime();
- alert(test.src);
- addLoadHandler(function(){ documentLoaded = true; if(imageLoaded) replacement(); });
- function documentLoad()
- {
- documentLoaded = true;
- if(imageLoaded)
- replacement();
- }
- function replacement()
- {
- for(var i=0;i<items.length;i++)
- {
- var elements = getElementsBySelector(items[i].selector);
- if(elements.length > 0) for(var j=0;j<elements.length;j++)
- {
- if(!elements[j])
- continue ;
- var text = extractText(elements[j]);
- while(elements[j].hasChildNodes())
- elements[j].removeChild(elements[j].firstChild);
- var tokens = items[i].wordwrap ? text.split(' ') : [text] ;
- for(var k=0;k<tokens.length;k++)
- {
- var url = items[i].url + "?text="+escape(tokens[k]+' ')+"&selector="+escape(items[i].selector);
- var image = document.createElement("img");
- image.className = "replacement";
- image.alt = tokens[k] ;
- image.src = url;
- elements[j].appendChild(image);
- }
- if(doNotPrintImages)
- {
- var span = document.createElement("span");
- span.style.display = 'none';
- span.className = "print-text";
- span.appendChild(document.createTextNode(text));
- elements[j].appendChild(span);
- }
- }
- }
- if(hideFlicker)
- setStyleSheetState('hide-flicker',false);
- }
- function addLoadHandler(handler)
- {
- if(window.addEventListener)
- {
- window.addEventListener("load",handler,false);
- }
- else if(window.attachEvent)
- {
- window.attachEvent("onload",handler);
- }
- else if(window.onload)
- {
- var oldHandler = window.onload;
- window.onload = function piggyback()
- {
- oldHandler();
- handler();
- };
- }
- else
- {
- window.onload = handler;
- }
- }
- function setStyleSheetState(id,enabled)
- {
- var sheet = document.getElementById(id);
- if(sheet)
- sheet.disabled = (!enabled);
- }
- function extractText(element)
- {
- if(typeof element == "string")
- return element;
- else if(typeof element == "undefined")
- return element;
- else if(element.innerText)
- return element.innerText;
- var text = "";
- var kids = element.childNodes;
- for(var i=0;i<kids.length;i++)
- {
- if(kids[i].nodeType == 1)
- text += extractText(kids[i]);
- else if(kids[i].nodeType == 3)
- text += kids[i].nodeValue;
- }
- return text;
- }
- /*
- Finds elements on page that match a given CSS selector rule. Some
- complicated rules are not compatible.
- Based on Simon Willison's excellent "getElementsBySelector" function.
- Original code (with comments and description):
- http://simon.incutio.com/archive/2003/03/25/getElementsBySelector
- */
- function getElementsBySelector(selector)
- {
- var tokens = selector.split(' ');
- var currentContext = new Array(document);
- for(var i=0;i<tokens.length;i++)
- {
- token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');
- if(token.indexOf('#') > -1)
- {
- var bits = token.split('#');
- var tagName = bits[0];
- var id = bits[1];
- var element = document.getElementById(id);
- if(tagName && element.nodeName.toLowerCase() != tagName)
- return new Array();
- currentContext = new Array(element);
- continue;
- }
- if(token.indexOf('.') > -1)
- {
- var bits = token.split('.');
- var tagName = bits[0];
- var className = bits[1];
- if(!tagName)
- tagName = '*';
- var found = new Array;
- var foundCount = 0;
- for(var h=0;h<currentContext.length;h++)
- {
- var elements;
- if(tagName == '*')
- elements = currentContext[h].all ? currentContext[h].all : currentContext[h].getElementsByTagName('*');
- else
- elements = currentContext[h].getElementsByTagName(tagName);
- for(var j=0;j<elements.length;j++)
- found[foundCount++] = elements[j];
- }
- currentContext = new Array;
- var currentContextIndex = 0;
- for(var k=0;k<found.length;k++)
- {
- if(found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b')))
- currentContext[currentContextIndex++] = found[k];
- }
- continue;
- }
- if(token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/))
- {
- var tagName = RegExp.$1;
- var attrName = RegExp.$2;
- var attrOperator = RegExp.$3;
- var attrValue = RegExp.$4;
- if(!tagName)
- tagName = '*';
- var found = new Array;
- var foundCount = 0;
- for(var h=0;h<currentContext.length;h++)
- {
- var elements;
- if(tagName == '*')
- elements = currentContext[h].all ? currentContext[h].all : currentContext[h].getElementsByTagName('*');
- else
- elements = currentContext[h].getElementsByTagName(tagName);
- for(var j=0;j<elements.length;j++)
- found[foundCount++] = elements[j];
- }
- currentContext = new Array;
- var currentContextIndex = 0;
- var checkFunction;
- switch(attrOperator)
- {
- case '=':
- checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
- break;
- case '~':
- checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };
- break;
- case '|':
- checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
- break;
- case '^':
- checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
- break;
- case '$':
- checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
- break;
- case '*':
- checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
- break;
- default :
- checkFunction = function(e) { return e.getAttribute(attrName); };
- }
- currentContext = new Array;
- var currentContextIndex = 0;
- for(var k=0;k<found.length;k++)
- {
- if(checkFunction(found[k]))
- currentContext[currentContextIndex++] = found[k];
- }
- continue;
- }
- tagName = token;
- var found = new Array;
- var foundCount = 0;
- for(var h=0;h<currentContext.length;h++)
- {
- var elements = currentContext[h].getElementsByTagName(tagName);
- for(var j=0;j<elements.length; j++)
- found[foundCount++] = elements[j];
- }
- currentContext = found;
- }
- return currentContext;
- }
- }// end of scope, execute code
- if(document.createElement && document.getElementsByTagName && !navigator.userAgent.match(/opera\/?6/i))
- com_stewartspeak_replacement();