{"id":35097,"date":"2017-12-26T03:01:18","date_gmt":"2017-12-25T17:01:18","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35097"},"modified":"2017-12-26T06:58:44","modified_gmt":"2017-12-25T20:58:44","slug":"animated-gif-via-php-writing-php-data-uri-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-data-uri-tutorial\/","title":{"rendered":"Animated GIF via PHP Writing PHP Data URI Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Animated GIF via PHP Writing PHP Data URI Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animegif_datauri.jpg\" title=\"Animated GIF via PHP Writing PHP Data URI Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF via PHP Writing PHP Data URI Tutorial<\/p><\/div>\n<p>The previous relevant &#8220;PHP writes PHP&#8221; methodology <a target=_blank title='Animated GIF information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GIF'>animated GIF<\/a> creator we talked about, first, with <a title='Animated GIF via PHP Writing PHP Primer Tutorial' href='#agvpwppt'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a> came back to mind yesterday with our <a target=_blank title='Missing Javascript Audio on Unmute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/'>Missing Javascript Audio on Unmute Tutorial<\/a>, where we pondered on whether an animated GIF could be represented on a webpage by a <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a>.  Why take an interest in this?  Data URIs are very important to do with &#8230;<\/p>\n<ul>\n<li>future mobile development web form navigation benefits from their usage<\/li>\n<li>the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible<\/li>\n<\/ul>\n<p> &#8230; and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.<\/p>\n<p>So we changed the Jeroen van Wissen&#8217;s <a target=_blank href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php' title='Great PHP library for Animated GIF creation work, thanks'>inspired<\/a> PHP (&#8220;PHP writes PHP&#8221; methodology) code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--GETME\">tutorial_to_animated_gif.php<\/a> code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIF&#8217;s data URI representation.  But don&#8217;t get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned <b>from what we already produced<\/b>, in that (in PHP &#8220;land&#8221;) &#8230;<\/p>\n<p><code><br \/>\n$lastbitto=\"\\$fp = fopen('animegif.gif', 'w');<br \/>\n\\$data = \\$gif->GetAnimation();<br \/>\n<b>\\$dataUri = 'data:image\/gif;base64,' . <a target=_blank title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a>(\\$data);<\/b><br \/>\nfwrite(\\$fp, \\$data);<br \/>\nfclose(\\$fp);<br \/>\n<b>\\$fp = fopen('animegif.html', 'w');<br \/>\nfwrite(\\$fp, '&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;h1&gt;Data URI version below&lt;h1&gt;&lt;br&gt;&lt;h4&gt; ... via web browser (Windows right click, Mac OS X two finger gesture ...&lt;\/h4&gt;&lt;br&gt;&lt;img src=' . \\\"\\\\n\\\" . \\$dataUri . \\\"\\\\n\\\" . ' title=DataURI&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\nfclose(\\$fp);\";<\/b><br \/>\n<\/code><\/p>\n<p>You can see this in the context of how this PHP code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--GETME\">this way<\/a> or try it as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\">live run<\/a>.<\/p>\n<hr>\n<p id='agvpwppt'>Previous relevant <a target=_blank title='Animated GIF via PHP Writing PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/'>Animated GIF via PHP Writing PHP 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\/animegif\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF via PHP Writing PHP Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animated_gif-186of.jpg\" title=\"Animated GIF via PHP Writing PHP Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF via PHP Writing PHP Primer Tutorial<\/p><\/div>\n<p>We find another very useful reason for PHP to write PHP.  Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like <a target=_blank title='Gifpal' href='http:\/\/www.gifpal.com'>Gifpal<\/a> would do.<\/p>\n<p>We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissen&#8217;s very <a target=_blank href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php'>useful link<\/a>, thanks.<\/p>\n<p>Then we added a more user friendly interface to get the information off the user we need.   We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP &#8230; and really needs to, to be useful.<\/p>\n<p>Do you remember, last, when we did some PHP writing PHP functionality &#8230; <a target=_blank title='PHP Writes PHP Vertical TextBoxes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a>?<\/p>\n<p>And inside the PHP it makes big use of the <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD and Image Functions<\/a> to read and write the image data we assemble via the user information.<\/p>\n<p>This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.<\/p>\n<p>Our PHP source code today you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php_GETME\" title='tutorial_to_animated_gif.php'>tutorial_to_animated_gif.php<\/a> and we redirect you to some live run ideas &#8230;<\/p>\n<ul>\n<li>normal run with HTML form which posts back to itself &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title='live run'>live run<\/a><\/li>\n<li>example GET parameters <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?delay=500&#038;stitle=PaintBrush%20Panning%20Primer%20Tutorial&#038;slideshow=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/index.html\" title='get parameters live run'>run<\/a> (like our tutorial picture)<\/li>\n<\/ul>\n<p>Hope you find this tutorial useful.<\/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='#d17197' onclick='var dv=document.getElementById(\"d17197\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/animation\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17197' 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='#d35097' onclick='var dv=document.getElementById(\"d35097\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/animated-gif\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35097' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The previous relevant &#8220;PHP writes PHP&#8221; methodology animated GIF creator we talked about, first, with Animated GIF via PHP Writing PHP Primer Tutorial came back to mind yesterday with our Missing Javascript Audio on Unmute Tutorial, where we pondered on &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-data-uri-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":[4,12,37],"tags":[83,84,1654,590,932,997,1319],"class_list":["post-35097","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animated-gif","tag-animation-2","tag-data-uri","tag-image","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35097"}],"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=35097"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35097\/revisions"}],"predecessor-version":[{"id":35111,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35097\/revisions\/35111"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}