{"id":34904,"date":"2017-12-17T03:01:19","date_gmt":"2017-12-16T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34904"},"modified":"2017-12-17T07:54:30","modified_gmt":"2017-12-16T21:54:30","slug":"php-gd-image-at-pixel-level-open-image-in-new-tab-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-open-image-in-new-tab-tutorial\/","title":{"rendered":"PHP GD Image at Pixel Level Open Image in New Tab Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Open Image in New Tab Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_sig_sig.gif\" title=\"PHP GD Image at Pixel Level Open Image in New Tab Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Open Image in New Tab Tutorial<\/p><\/div>\n<p>We encouraged recently to use the web browser right click (for Windows, two finger gesture on Mac) functionality on our pixellated images in yesterday&#8217;s <a title='PHP GD Image at Pixel Level User of Signature Tutorial' href='#phpgdiplust'>PHP GD Image at Pixel Level User of Signature Tutorial<\/a> work, for instance.  But we were slothful about unit testing enough all the scenarios.  Hold your breath, while we explain.<\/p>\n<p>We use a &#8220;rigid&#8221; &#8230;<\/p>\n<ul>\n<li>HTML form<\/li>\n<li>method=POST<\/li>\n<li>action=&#8217;\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php&#8217;<\/li>\n<\/ul>\n<p> &#8230; interfacing method to do this with the User of Signature Signature (and indeed the Signature Signature) web application failing because the web browser functionalities here use that HTML form&#8217;s URL in a get parameters sense, which in the &#8220;old days&#8221; amounted to &#8230;<\/p>\n<p><code><br \/>\n\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php<br \/>\n<\/code><\/p>\n<p> &#8230; &#8220;rigid&#8221; (that simplifies logic) in the sense that we do not test the length of a proposed $_GET[] message against the server limit for URL lengths, in order to change method=POST to method=GET &#8230; but to solve this issue, jumping to the conclusion here for a second, we start to now use a mix of predominantly $_POST[] data (minus &#8220;lookfor&#8221; and minus &#8220;mode&#8221;) but additionally the one vital $_GET[] as per &#8230;<\/p>\n<p><code><br \/>\n\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?lookfor=postget<br \/>\n<\/code><\/p>\n<p>Why?  Well, the &#8220;?lookfor=postget&#8221; serves to signal to our child PHP pixellator we are posting via an HTML form method=POST but we could expect a web browser right click (Windows, two finger gesture on Mac) piece of functionality to follow, so, in the meantime, in a flat file on the server record the pertinent parts of the contents of the values of that HTML form (with its POSTed input elements), and if then presented with &#8230;<\/p>\n<p><code><br \/>\n\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?lookfor=postget<br \/>\n<\/code><\/p>\n<p> &#8230; but this time from a web browser right click (for Windows, two finger gesture on Mac) piece of functionality, the PHP &#8220;child&#8221; pixellator will know to not get its argument data from the $_POST[] array, but rather from that web server flat file&#8217;s information.  Cute, huh?  Please note, in this way, this modern day dilemma is the result of an HTML form method=POST (where we only use the $_POST[] array).  We get around it with that mix of $_POST[] and that one $_GET[]&#8217;s &#8220;lookfor&#8221; value (and with the &#8220;user of signature signature&#8221; we add a random &#8220;r&#8221; value to fool the cache to make the web browser revisit the web server (and back to the web browser) for information).  The &#8220;bad&#8221; (before) versus &#8220;good&#8221; (after) view of this happens on today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_sig_sig.gif\">tutorial picture<\/a>.<\/p>\n<p>The &#8220;child&#8221; PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php------GETME\" title=\"pixellate.php\">pixellate.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php------GETME\" title=\"pixellate.php\">this way<\/a>, supervised by either\/both &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html\" title=\"Click picture\">Creating Signatures<\/a> via this downloadable HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html------GETME\">signature_signature.html<\/a> (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html------GETME\">these changes<\/a>)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">Using those Signatures<\/a> via this downloadable HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------GETME\">user_of_signature_signature.html<\/a> (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------GETME\">these changes<\/a> (huh?! &#8230; fooled ya &#8230; it did at one stage need tiny change but the Javascript (<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js-----------------------GETME' title='signature_signature.js'>signature_signature.js<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js-----------------------GETME' title='signature_signature.js'>set of changes<\/a>) ended up absorbing that with a dynamic DOM HTML form <i>action<\/i> value modification for that &#8220;r&#8221; parameter requirement))<\/li>\n<\/ul>\n<hr>\n<p id='phpgdiplust'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level User of Signature Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-user-of-signature-tutorial\/'>PHP GD Image at Pixel Level User of Signature Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level User of Signature Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_sig_sig.jpg\" title=\"PHP GD Image at Pixel Level User of Signature Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level User of Signature Tutorial<\/p><\/div>\n<p>We&#8217;re getting there, but we are not there yet.  Sound familiar?!  Yes, to learn how to do something, it often requires the breaking up of the problem into bits.  But no spoiler alerts today, as you continue on our journey &#8230; to who knows where?!<\/p>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Signature Web Storage Tutorial' href='#phpgdiplswst'>PHP GD Image at Pixel Level Signature Web Storage Tutorial<\/a> got us &#8220;projecting&#8221; <i>scribble<\/i> data, our signatures, to a pixellated image data source.<\/p>\n<p>That work yesterday involved HTML &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html\" title=\"Click picture\">creating signatures<\/a> via this downloadable HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-----GETME\">signature_signature.html<\/a> (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-----GETME\">these changes<\/a> and supervising <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------GETME\">the changed<\/a> Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------GETME\">signature_signature.js<\/a>) we now show a pixellated view, like a negative, of the signature (with all the web browser sharing functionality) along with the dataURI image already created\n<\/p><\/blockquote>\n<p> &#8230; and for today&#8217;s purposes <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------GETME\">the changes<\/a> to the Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------GETME\">signature_signature.js<\/a> represented the biggest changes to have <i>canvas geometry<\/i> being projected onto a pixellated image data source.<\/p>\n<p>Where do we do this interfacing?  Read down from <a target=_blank title='Signature Signature Supervisor PDF Writing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-supervisor-pdf-writing-tutorial'>Signature Signature Supervisor PDF Writing Tutorial<\/a> through the blog posting to see us work up from that initial &#8220;signature&#8221; idea into a &#8220;user of signatures&#8221; supervisor with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">live run<\/a> showing a canvas that can &#8220;project&#8221; these new pixellated images now, using the HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-----GETME\" title=\"user_of_signature_signature.html\">user_of_signature_signature.html<\/a> (which changed in this way<\/a> for those purposes).<\/p>\n<p>So please hang on while we think about piecing some of these ideas into concepts to &#8220;kick us down the road&#8221; towards our destination <font size=1>&#8230; no, we&#8217;re not just going to celebrate &#8220;bin night&#8221; &#8230; but you&#8217;re getting warmer<\/font>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>The &#8220;child&#8221; PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-----GETME\" title=\"pixellate.php\">pixellate.php<\/a> (that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-----GETME\" title=\"pixellate.php\">this way<\/a> and that you can try for yourself <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?positive=y&#038;size=2&#038;zeroes=2\" title=\"pixellate.php\">an example positive live run<\/a>) now accepts the (non-negative) or &#8230;<\/p>\n<table>\n<tr>\n<td>\n<code><br \/>\npositive=Y<br \/>\n<\/code><\/td>\n<td><iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?positive=y&#038;size=2&#038;zeroes=2\" title=\"pixellate.php\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; argument to have a white background rather than the default black one, with the pixellated images created.  We&#8217;d like to thank this <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/10736164\/image-gd-white-background'>very useful link<\/a>.<\/p>\n<hr>\n<p id='phpgdiplswst'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Signature Web Storage Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-signature-web-storage-tutorial\/'>PHP GD Image at Pixel Level Signature Web Storage Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"New PHP GD Image at Pixel Level Signature Web Storage Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sig_sig.jpg\" title=\"New PHP GD Image at Pixel Level Signature Web Storage Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Signature Web Storage Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s <a title='PHP GD Image at Pixel Level Signature Tutorial' href='#phpgdiplst'>PHP GD Image at Pixel Level Signature Tutorial<\/a> pixellating of a signature, behind the scenes there were HTTP Cookies used as a mechanism to store signature data.   Today, we have a dual purpose, that being &#8230;<\/p>\n<ul>\n<li>signatures are a good candidate to start using <a target=_blank title='Web Storage information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'>web storage<\/a> (localStorage &#8211; stores data with no expiration date) rather than HTTP Cookies, as there is about 10mB to <a target=_blank title='localStorage limits' href='https:\/\/stackoverflow.com\/questions\/2989284\/what-is-the-max-size-of-localstorage-values'>play around with<\/a> using this method &#8230; as well as &#8230;<\/li>\n<li>when <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html\" title=\"Click picture\">creating signatures<\/a> via this downloadable HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-----GETME\">signature_signature.html<\/a> (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-----GETME\">these changes<\/a> and supervising <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------GETME\">the changed<\/a> Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------GETME\">signature_signature.js<\/a>) we now show a pixellated view, like a negative, of the signature (with all the web browser sharing functionality) along with the dataURI image already created\n<\/ul>\n<p>Just to reiterate on <a target=_blank title='Web Storage information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'>web storage<\/a>, that was introduced with HTML5 &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'><p>\nWith web storage, web applications can store data locally within the user&#8217;s browser.<br \/>\n<br \/>\nBefore HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.<br \/>\n<br \/>\nUnlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.<br \/>\n<br \/>\nWeb storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.\n<\/p><\/blockquote>\n<hr>\n<p id='phpgdiplst'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Signature Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-signature-tutorial\/'>PHP GD Image at Pixel Level Signature Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?width=800&#038;coords=605,152,605,151,605,149,604,148,604,147,604,145,603,142,603,138,602,133,602,128,602,126,602,119,602,107,602,106,602,105,602,101,602,99,604,98,606,97,609,96,611,94,613,92,618,92,621,91,624,91,628,91,631,91,635,92,639,95,642,98,642,99,644,103,647,106,648,108,648,111,649,114,649,116,649,119,649,121,649,123,649,126,648,128,645,130,643,133,641,133,639,135,635,136,632,136,629,136,625,136,623,136,621,136,619,134,616,133,614,132,612,130,611,129,610,128,610,127,609,127,607,127,607,126,607,125,610,125,611,125,612,125,615,125,618,125,621,125,625,125,628,125,632,127,637,129,643,135,645,137,650,140,651,143,654,146,657,148,659,151,660,152,661,154,662,155,662,156,663,156,+0,0,683,153,683,151,683,148,683,146,683,143,683,140,683,136,683,133,683,125,683,116,683,108,683,98,683,92,683,86,683,84,683,80,683,76,683,75,683,72,683,71,685,71,686,72,686,77,687,81,687,88,688,94,688,101,688,105,688,110,689,116,689,120,689,125,689,127,689,129,690,130,690,132,690,133,691,133,691,134,692,133,701,105,709,86,710,81,715,72,718,65,721,58,725,52,727,51,729,48,731,44,734,42,735,41,736,40,737,40,738,40,745,47,746,52,748,62,749,68,750,78,753,87,754,97,756,105,757,111,758,118,759,124,760,126,762,130,763,134,763,136,764,137,764,139,765,140,765,142,766,142,766,143\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Signature Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/map_signature_pixels.jpg\" title=\"PHP GD Image at Pixel Level Signature Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Signature Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Geometry Tutorial' href='#phpgdiplgt'>PHP GD Image at Pixel Level Geometry Tutorial<\/a> set us up for more organizational uses of our pixel level image web application of late.  We continue on with that idea, today, with the idea of a signature, and go right back to the <a target=_blank title='Signature Signature Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-primer-tutorial\/'>Signature Signature Primer Tutorial<\/a> scribble in a canvas functionality (as the source of our co-ordinates for a signature) and ready the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php----GETME\" title=\"pixellate.php\">pixellate.php<\/a> (that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php----GETME\" title=\"pixellate.php\">this way<\/a>) to accept &#8230;<\/p>\n<ul>\n<li>map\/area element HTML input data &#8230; like we deal with &#8220;legend&#8221; functionality as mentioned in <a target=_blank title='Legend for and from HTML Map Element Web Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-web-server-tutorial\/'>Legend for and from HTML Map Element Web Server Tutorial<\/a> (and its ilk) &#8230; (all the way) down to (the pared down essence that is a) &#8230;<\/li>\n<li>co-ordinate list of comma separated (x,y) values that is &#8220;pen down&#8221; as the default but <i>+0,0,<\/i> or <i>;<\/i> can be indicators of &#8220;pen up&#8221;<\/li>\n<\/ul>\n<p> &#8230; the latter of which we take from the &#8220;signature&#8221; web application (via Google Chrome Developer Tools) over to the &#8220;legends&#8221; functionality <a target=_blank title='legend_via_map.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html---------GETME'>legend_via_map.htm<\/a> that changed in <a target=_blank title='legend_via_map.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html---------GETME'>this small way<\/a> (and that you can try for yourself with this <a target=_blank title='legend_via_map.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.htm'>live run<\/a> link) to add another new button to link to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?width=800&#038;coords=605,152,605,151,605,149,604,148,604,147,604,145,603,142,603,138,602,133,602,128,602,126,602,119,602,107,602,106,602,105,602,101,602,99,604,98,606,97,609,96,611,94,613,92,618,92,621,91,624,91,628,91,631,91,635,92,639,95,642,98,642,99,644,103,647,106,648,108,648,111,649,114,649,116,649,119,649,121,649,123,649,126,648,128,645,130,643,133,641,133,639,135,635,136,632,136,629,136,625,136,623,136,621,136,619,134,616,133,614,132,612,130,611,129,610,128,610,127,609,127,607,127,607,126,607,125,610,125,611,125,612,125,615,125,618,125,621,125,625,125,628,125,632,127,637,129,643,135,645,137,650,140,651,143,654,146,657,148,659,151,660,152,661,154,662,155,662,156,663,156,+0,0,683,153,683,151,683,148,683,146,683,143,683,140,683,136,683,133,683,125,683,116,683,108,683,98,683,92,683,86,683,84,683,80,683,76,683,75,683,72,683,71,685,71,686,72,686,77,687,81,687,88,688,94,688,101,688,105,688,110,689,116,689,120,689,125,689,127,689,129,690,130,690,132,690,133,691,133,691,134,692,133,701,105,709,86,710,81,715,72,718,65,721,58,725,52,727,51,729,48,731,44,734,42,735,41,736,40,737,40,738,40,745,47,746,52,748,62,749,68,750,78,753,87,754,97,756,105,757,111,758,118,759,124,760,126,762,130,763,134,763,136,764,137,764,139,765,140,765,142,766,142,766,143\" title=\"pixellate.php\">PHP pixellate live run<\/a> type functionality.<\/p>\n<p>Maybe you can see where we are heading with all this, but we need to walk before running?!  This link to &#8220;scribble&#8221; canvas work is a step in itself, and if you are new to the idea of &#8220;scribbling&#8221; on canvas then you&#8217;ll need to sidetrack with that <a target=_blank title='Signature Signature Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-primer-tutorial\/'>Signature Signature Primer Tutorial<\/a> link way above to get all this in context.  Chow for now.<\/p>\n<hr>\n<p id='phpgdiplgt'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Geometry Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-geometry-tutorial\/'>PHP GD Image at Pixel Level Geometry Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?circle=50,110,40,50,110,20&#038;size=1&#038;coords=50,50,50,60,60,60&#038;arc=20,290\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Geometry Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.jpeg\" title=\"PHP GD Image at Pixel Level Geometry Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Geometry Tutorial<\/p><\/div>\n<p>We&#8217;re off jumping again (post yesterday&#8217;s <a title='PHP GD Image at Pixel Level Animation Tutorial' href='#phpgdiplat'>PHP GD Image at Pixel Level Animation Tutorial<\/a> &#8220;chicken&#8221; work) a.k.a. &#8230;<\/p>\n<blockquote><p>\nOn a (web application) &#8220;tool&#8221; project, is it the chicken or the egg that drives you?  Sometimes, for us, we jump around.  For us, depending on the nature of the &#8220;tool&#8221; we enjoy trying to &#8230;<\/p>\n<ul>\n<li>make the &#8220;child&#8221; generic &#8230; the &#8220;egg&#8221; above<\/li>\n<li>interface interestingly from the &#8220;parent&#8221; usefully &#8230; the &#8220;chicken&#8221; above<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; because it occurs to us, with the &#8220;egg&#8221;, so far we&#8217;ve just been throwing &#8220;game like&#8221; &#8230;<\/p>\n<p><code><br \/>\n  $x = <a target=_blank title='PHP rand() method information' href='http:\/\/php.net\/manual\/en\/function.rand.php'>rand<\/a>(0, $width);<br \/>\n  $y = rand(0, $height);<br \/>\n<\/code><\/p>\n<p> &#8230; randomosity regarding co-ordinates used to pixellate &#8220;point&#8221; data.  But suppose, today, we open the door to some order, some mathematical geometry ideas?!  We&#8217;ve come up with the following additional parameterization ideas (not interfering with anything else that has come before &#8230; ie. &#8220;forward compatibility&#8221;), namely &#8230;<\/p>\n<ul>\n<li><i>coords<\/i> &#8230; comma separated (x,y) co-ordinate set pairs that, by default, represent &#8220;pen down&#8221; <a target=_blank title='Rasterization information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Rasterisation'>rasterizations<\/a> (our best &#8220;thought bubble&#8221; word for pixellations not in &#8220;point&#8221; form but in &#8220;pen down&#8221; &#8220;plotting&#8221; form &#8230; from the early &#8220;scanning&#8221; days of laser printers and even earlier days of data plotters &#8230; that &#8220;rasterize&#8221; linear data into &#8220;pixellated&#8221; form) &#8230; including a &#8220;+&#8221; sign at the start of &#8220;x&#8221; or &#8220;y&#8221; values is your way of defining &#8220;pen up&#8221;<\/li>\n<li><i>closecoords<\/i> &#8230; as above, but join last to first as well (or just mention to say this about the <i>coords<\/i> value)<\/li>\n<li><i>circle<\/i> &#8230; circle information comma separated (cx,cy,radius) sets<\/li>\n<li><i>arc<\/i> &#8230; relevant to <i>circle<\/i> in the form of clockwise arc in degrees to allow or the comma separated (start,end) of clockwise arc in degrees starting with the zero degrees (north) bearing as zero<\/li>\n<\/ul>\n<p> &#8230; and you&#8217;ve got the beginnings of some &#8220;orderly&#8221; geometry, and some &#8220;pen up\/pen down&#8221; thoughts (and we recommend insomniacs try chanting &#8220;pen up&#8221;, &#8220;pen down&#8221; very sombrely for however long it takes rather than envisaging &#8220;pigs&#8221; <font size=1>&#8230; now that&#8217;s almost as ridiculous as <i>baaaaa baaaaaaas<\/i><\/font>), simple though it is, up to now.<\/p>\n<p>Again, you can try this for yourself at this &#8220;child&#8221; &#8220;standalone&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?circle=50,110,40,50,110,20&#038;size=1&#038;coords=50,50,50,60,60,60&#038;arc=20,290\" title='Click picture (for tutorial picture simulation)'>live run<\/a> link for the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php---GETME\" title=\"pixellate.php\">pixellate.php<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php---GETME\" title=\"pixellate.php\">this way<\/a> for today&#8217;s extended geometry (and pen up\/pen down logic) choices.<\/p>\n<hr>\n<p id='phpgdiplat'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Animation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-animation-tutorial\/'>PHP GD Image at Pixel Level Animation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.jpg\" title=\"PHP GD Image at Pixel Level Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Animation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Outputs Tutorial' href='#phpgdiplot'>PHP GD Image at Pixel Level Outputs Tutorial<\/a> was a tilt back to getting the &#8220;hard working duck&#8221; PHP child process more user friendly, and don&#8217;t know if the PHP&#8217;s newfound &#8230;<\/p>\n<blockquote><p>\n&#8220;parent&#8221; &#8220;body&#8221; (<b>or other<\/b>) element background image\n<\/p><\/blockquote>\n<p> &#8230; clang any bells in your head regarding possibilities, but it did for us regarding how to start using that PHP &#8220;child&#8221; iframe functionality in terms of an animation (effectively).  Supposing we &#8220;start&#8221; (and, no doubt &#8220;start&#8221; is just that) with an HTML &#8220;parent&#8221; web application that just consists of &#8230;<\/p>\n<ul>\n<li>table element with one row and three columns for now &#8230; and (a bank of) &#8230;<\/li>\n<li>iframe elements<\/li>\n<\/ul>\n<p> &#8230; respectively providing &#8230;<\/p>\n<ul>\n<li>where to place animation &#8230; and &#8230;<\/li>\n<li>means by which to create the animation<\/li>\n<\/ul>\n<p> &#8230; because when you consider what &#8220;animation&#8221; consists of, we now have the wherewithal to do it in that &#8230;<\/p>\n<ul>\n<li>an &#8220;animation&#8221; is a set of &#8230;\n<ol>\n<li>moving<\/li>\n<li>images<\/li>\n<\/ol>\n<p> &#8230; where &#8230;<\/li>\n<li>the &#8220;moving&#8221; is worked by timed (via Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> method) creation of (table) cellular background<\/li>\n<li>&#8220;images&#8221; pixellated by the &#8220;child&#8221; iframe PHP &#8220;tool&#8221; web application (unchanged from yesterday&#8217;s work)<\/li>\n<\/ul>\n<p> &#8230; moved fast enough to help the human mind recognize it as &#8220;animation&#8221;, whose HTML supervisory &#8220;parent&#8221; code can be downloaded as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html_GETME\" title=\"build_night_sky.html\">build_night_sky.html<\/a> and tried with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpgdiplot'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Outputs Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-outputs-tutorial\/'>PHP GD Image at Pixel Level Outputs Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Outputs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.png\" title=\"PHP GD Image at Pixel Level Outputs Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Outputs Tutorial<\/p><\/div>\n<p>On a (web application) &#8220;tool&#8221; project, is it the chicken or the egg that drives you?  Sometimes, for us, we jump around.  For us, depending on the nature of the &#8220;tool&#8221; we enjoy trying to &#8230;<\/p>\n<ul>\n<li>make the &#8220;child&#8221; generic &#8230; the &#8220;egg&#8221; above<\/li>\n<li>interface interestingly from the &#8220;parent&#8221; usefully &#8230; the &#8220;chicken&#8221; above<\/li>\n<\/ul>\n<p>You could class yesterday&#8217;s <a href='#pgiaplbt' title='PHP GD Image at Pixel Level Background Tutorial'>PHP GD Image at Pixel Level Background Tutorial<\/a> as a <font size=1>(baark, baark baark baark)<\/font> &#8220;chicken&#8221; moment, enjoying writing a quirky &#8220;parent&#8221; for the &#8220;Image Pixellating&#8221; &#8220;child&#8221; iframe PHP code, even prompting an (important) improvement in its abilities &#8220;opacity&#8221; wise.<\/p>\n<p>Today, though, you may think of it as stepping back to the &#8220;Primer&#8221; tutorial, but to us is sometimes the way projects &#8220;roll&#8221;, in that we think of a whole lot more functionality parts for the &#8220;egg&#8221; (&#8220;child&#8221; iframe PHP image pixellator).  These new functionalities can all be classed as &#8230;<\/p>\n<p><code><br \/>\nforms of output<br \/>\n<\/code><\/p>\n<p> &#8230; changes, where we can envisage &#8220;parent&#8221; web applications that will demand far more flexibility than just offering the &#8220;parent&#8221; yesterday&#8217;s sole &#8220;output&#8221; (mode) option of &#8230;<\/p>\n<p><code><br \/>\nimage data in a \"child\" iframe created via PHP's<br \/>\n<br \/>\nheader('Content-Type: image\/png');<br \/>\nimagepng($gd);<br \/>\n<\/code><\/p>\n<p> &#8230; line of thinking.  With incredibly useful help from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/8551754\/convert-gd-output-to-base64'>this useful link<\/a>, thanks (which, incidentally, appeared up the top of the list of this <a target=_blank title='Google search' href='https:\/\/www.google.com.au\/search?q=php+gd+image+to+datauri&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=NagsWuq4NIzp8weU-Y_wCw'>Google search<\/a>) we were reminded of how that PHP code lines above could be &#8220;melded&#8221; into &#8230;<\/p>\n<p><code><br \/>\n\/\/ header('Content-Type: image\/png');<br \/>\n<a target=_blank title='PHP ob_start method information' href='http:\/\/php.net\/manual\/en\/function.ob-start.php'>ob_start<\/a>();<br \/>\nimagepng($gd);<br \/>\n$image_data = <a target=_blank title='PHP ob_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.ob-get-contents.php'>ob_get_contents<\/a>();<br \/>\n<a target=_blank title='PHP ob_end_clean method information' href='http:\/\/php.net\/manual\/en\/function.ob-end-clean.php'>ob_end_clean<\/a>();<br \/>\n$image_data_base64 = base64_encode($image_data);<br \/>\n<\/code><\/p>\n<p> &#8230; to end up with, in the PHP var<font size=1>iable<\/font> $image_data_base64 above a <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>dataURI<\/a> of the image pixellated by our (&#8220;child&#8221; iframe supervised, perhaps) PHP web application, and opening the door to all manner of (additional &#8220;output&#8221; driven) interfacing (or standalone) possibilities like &#8230;<\/p>\n<ul>\n<li>&#8220;standalone&#8221; &#8220;image&#8221; data presented in an HTML <a target=_blank title='HTML img tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;div&#8221; image data encased in an HTML <a target=_blank title='HTML div tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;canvas&#8221; image data placed into in an HTML <a target=_blank title='HTML canvas tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_canvas.asp'>canvas<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;body&#8221; element background image<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;image&#8221;<\/span> data presented in an HTML <a target=_blank title='HTML img tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element, as in &#8230;<br \/>\n<img style='border:2px solid orange;' id=pimg src='' style='height:600px;width:590px;'><\/img><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=imagepimg&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=imagepimg&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;div&#8221;<\/span> image data encased in an HTML <a target=_blank title='HTML div tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> element, as in &#8230;\n<div style='border:2px solid orange;height:600px;width:590px;' id=pdiv><\/div>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=divpdiv&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=divpdiv&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;canvas&#8221;<\/span> image data placed into in an HTML <a target=_blank title='HTML canvas tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_canvas.asp'>canvas<\/a> element, as in &#8230;<br \/>\n<canvas style='border:2px solid orange;height:600px;width:590px;' id=pcanvas height=600 width=590><\/canvas><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvaspcanvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvaspcanvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;parent&#8221; &#8220;body&#8221; (or other) element background image<\/li>\n<\/ul>\n<p>You can try this for yourself at this &#8220;child&#8221; &#8220;standalone&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas\" title='Click picture (in canvas output mode)'>live run<\/a> link for the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php--GETME\" title=\"pixellate.php\">pixellate.php<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php--GETME\" title=\"pixellate.php\">this way<\/a> for today&#8217;s extended &#8220;output&#8221; choices.<\/p>\n<hr>\n<p id='pgiaplbt'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Background Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-background-tutorial\/'>PHP GD Image at Pixel Level Background Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Background Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.gif\" title=\"PHP GD Image at Pixel Level Background Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Background Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Primer Tutorial' href='#phpgdiplpt'>PHP GD Image at Pixel Level Primer Tutorial<\/a> had us musing &#8230;.<\/p>\n<blockquote><p>\nDo you feel this web application has the genericity to be a &#8220;tool&#8221;?  Spoiler alert &#8230; we think so.\n<\/p><\/blockquote>\n<p> &#8230; and so here we are, today, with the first idea regarding using that PHP code as a &#8220;tool&#8221;, a &#8220;background image iframe&#8221; tool, using two (of the usual &#8220;three amigos&#8221;, <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> having gone walkabout due to &#8220;relevance deprivation syndrome&#8221;, today) of our usual <a target=_blank title='Overlay tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> suspects &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property (teamed with top:0px and left:0px)<\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>We encase yesterday&#8217;s PHP work into an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;child&#8221; element, and rather than relying on the &#8220;parent&#8221; supervisory (and new) HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html_GETME\" title=\"pixellate.html\">pixellate.html<\/a> to control <i>opacity<\/i> via the opacity of the HTML iframe element (which we may still allow for &#8230; we&#8217;ll see) we opt to make the &#8220;child&#8221; HTML iframe PHP be that little more flexible by allowing for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-GETME\" title=\"pixellate.php\">pixellate.php<\/a> change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-GETME\" title=\"pixellate.php\">this way<\/a> to allow for a tailored calling mechanism regarding &#8220;opacity&#8221; via &#8230;<\/p>\n<ul>\n<li><strike><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocate.php'>imagecolorallocate<\/a><\/strike> <a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocatealpha.php'>imagecolorallocatealpha<\/a>&#8216;s fifth &#8220;alpha&#8221; (ie. 127=transparent, 0=opaque) parameter<\/li>\n<\/ul>\n<p> &#8230; that is user controllable via &#8220;&#038;opacity=1.0&#8221; type of URL bit where (1.0=opaque, 0.0=transparent) usage.<\/p>\n<p>The parent&#8217;s job using this PHP &#8220;child&#8221; would be to set some transparency to an HTML &#8220;iframe&#8221; call of the PHP to cover the window, where we call into play the Javascript window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> method to resize the PHP &#8220;child&#8221; to full window dimensions, on the proviso that any parameters the user uses to call the &#8220;parent&#8221; HTML don&#8217;t override this &#8220;default&#8221; <i>width<\/i> and <i>height<\/i> of background image (ie. PHP &#8220;child&#8221; iframe) settings.<\/p>\n<p>Guess the other job of the &#8220;parent&#8221; is to &#8220;mean&#8221; something, and so we write some content on the &#8220;theme&#8221; of &#8220;Lyrics of Songs about Stars&#8221; because the background image effects you get with the &#8220;pixellated&#8221; PHP GD calls remind us of the nighttime sky, and stars, and you can see this in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpgdiplpt'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-primer-tutorial\/'>PHP GD Image at Pixel Level Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.jpg\" title=\"PHP GD Image at Pixel Level Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Primer Tutorial<\/p><\/div>\n<p>A great place to start learning about the serverside language PHP is to read the webpage <a target=_blank title='PHP GD Image library information' href='http:\/\/php.net\/manual\/en\/book.image.php'>Image Processing and GD<\/a> because PHP is great in so many ways regarding image creation and manipulation.<\/p>\n<p>The GD methods (down to the pixel level, with the first one) we use are &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagesetpixel.php'>imagesetpixel<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecreatetruecolor.php'>imagecreatetruecolor<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocate.php'>imagecolorallocate<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagepng.php'>imagepng<\/a><\/li>\n<\/ul>\n<p>What we parameterize is &#8230;<\/p>\n<ul>\n<li>width of image<\/li>\n<li>height of image<\/li>\n<li>density of pixels created<\/li>\n<li>size of conglomeration of pixel (rectangular &#8220;blob&#8221;)<\/li>\n<\/ul>\n<p>Today&#8217;s PHP code you can download via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php_GETME\" title=\"pixellate.php\">pixellate.php<\/a> link and try it via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php\" title=\"Click picture\">live run<\/a> link.  We kind of like some of the images as below &#8230;<\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4' style='width:100%;height:610px;'><\/iframe><\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe><\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490' style='width:100%;height:510px;'><\/iframe><\/p>\n<p>Do you feel this web application has the genericity to be a &#8220;tool&#8221;?  Spoiler alert &#8230; we think so.<\/p>\n<p>You can see this, also, at WordPress 4.1.1&#8217;s <a target=_blank title='PHP GD Image at Pixel Level Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-primer-tutorial\/'>PHP GD Image at Pixel Level Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34717' onclick='var dv=document.getElementById(\"d34717\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gd\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34717' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34739' onclick='var dv=document.getElementById(\"d34739\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34739' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34766' onclick='var dv=document.getElementById(\"d34766\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34766' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34801' onclick='var dv=document.getElementById(\"d34801\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34801' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34821' onclick='var dv=document.getElementById(\"d34821\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34821' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34845' onclick='var dv=document.getElementById(\"d34845\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/signature\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34845' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34859' onclick='var dv=document.getElementById(\"d34859\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localStorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34859' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34884' onclick='var dv=document.getElementById(\"d34884\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34884' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34904' onclick='var dv=document.getElementById(\"d34904\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34904' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We encouraged recently to use the web browser right click (for Windows, two finger gesture on Mac) functionality on our pixellated images in yesterday&#8217;s PHP GD Image at Pixel Level User of Signature Tutorial work, for instance. But we were &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-open-image-in-new-tab-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[84,126,127,177,184,208,1707,224,1654,1923,342,354,452,1550,484,1801,513,2258,576,587,590,652,2415,752,2417,853,876,894,2411,2414,2413,932,1918,954,2416,997,2412,1841,1126,1586,1784,1200,2334,1319,2409,2257,1827],"class_list":["post-34904","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-animation-2","tag-background","tag-background-image","tag-cache","tag-canvas","tag-circle","tag-co-ordinates","tag-colour","tag-data-uri","tag-density","tag-div","tag-dom","tag-form","tag-gd","tag-geometry","tag-getcomputedstyle","tag-google","tag-height","tag-html","tag-iframe","tag-image","tag-javascript","tag-localstorage","tag-mathematics","tag-negative","tag-ob_start","tag-opacity","tag-overlay","tag-parent","tag-pen-down","tag-pen-up","tag-php","tag-pixel","tag-plot","tag-positive","tag-programming","tag-rasterize","tag-scribble","tag-settimeout","tag-shape","tag-signature","tag-stop-press","tag-submit","tag-tutorial","tag-web-storage","tag-width","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34904"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34904"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34904\/revisions"}],"predecessor-version":[{"id":34920,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34904\/revisions\/34920"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}