{"id":34739,"date":"2017-12-10T03:01:09","date_gmt":"2017-12-09T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34739"},"modified":"2017-12-10T05:57:59","modified_gmt":"2017-12-09T19:57:59","slug":"php-gd-image-at-pixel-level-background-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-background-tutorial\/","title":{"rendered":"PHP GD Image at Pixel Level Background Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s PHP GD Image at Pixel Level Primer Tutorial had us musing &#8230;. Do you feel this web application has the genericity to be a &#8220;tool&#8221;? Spoiler alert &#8230; we think so. &#8230; and so here we are, today, with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-background-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":[126,127,224,1923,1550,1801,2258,576,587,590,652,876,894,932,1918,997,1319,2257,1827],"class_list":["post-34739","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-colour","tag-density","tag-gd","tag-getcomputedstyle","tag-height","tag-html","tag-iframe","tag-image","tag-javascript","tag-opacity","tag-overlay","tag-php","tag-pixel","tag-programming","tag-tutorial","tag-width","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34739"}],"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=34739"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34739\/revisions"}],"predecessor-version":[{"id":34757,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34739\/revisions\/34757"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}