{"id":60769,"date":"2023-09-16T03:01:50","date_gmt":"2023-09-15T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60769"},"modified":"2023-09-15T15:16:34","modified_gmt":"2023-09-15T05:16:34","slug":"animated-gif-creation-transparency-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-transparency-tutorial\/","title":{"rendered":"Animated GIF Creation Transparency 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=\"border: 15px solid pink;\" alt=\"Animated GIF Creation Transparency Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_transparency.jpg\" title=\"Animated GIF Creation Transparency Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Creation Transparency Tutorial<\/p><\/div>\n<p>You might have heard &#8230;<\/p>\n<blockquote><p>\nTransparency begins at home.\n<\/p><\/blockquote>\n<p> &#8230; or not, because as far as we know, we just sprouted it?!  Nevertheless, this matter of &#8230;<\/p>\n<ul>\n<li>image transparency &#8230; in terms of the image being an Animated GIF slide &#8230; via &#8230;<\/li>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> &#8230; or &#8230;<\/li>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a><\/li>\n<\/ul>\n<p> &#8230; deserves our consideration, we&#8217;ve decided, today &#8230; because &#8230;<\/p>\n<blockquote><p>\n<font size=1>Transparency begins at home.<\/font>\n<\/p><\/blockquote>\n<p>We&#8217;ll just try our best here, but we have discovered a nuance that hadn&#8217;t tweaked with us before, considering &#8220;transparency&#8221; and using &#8220;canvas&#8221; elements.   The &#8230;<\/p>\n<ul>\n<li><code>[canvasElementContext].clearRect(0, 0, [canvasWidth], [canvasHeight]); \/\/ idea causes the canvas to become transparent ... different to the other concept like ...<\/code>\n<\/li>\n<li><code>[canvasElementContext].fillStyle='white';<br \/>[canvasElementContext].fillRect(0, 0, [canvasWidth], [canvasHeight]); \/\/ this example idea causes the canvas to become white<\/code>\n<\/li>\n<\/ul>\n<p>It&#8217;s affected two &#8220;avenues of effect&#8221; <font size=1>(or is this a book?!)<\/font> with our Animated GIF Creator logic &#8230;<\/p>\n<ol>\n<li>if a SVG<sub>+xml<\/sub> element data URI utf8 format representation <font color=blue>mentions the word &#8220;transparent&#8221;<\/font> we are now going to make the relevant helper canvas element background be transparent &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction drawInlineSVG(rawSVG, slidename) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/27230293\/how-to-draw-an-inline-svg-in-dom-to-a-canvas<br \/>\n    var rsvg = new Blob([rawSVG], {type:'image\/svg+xml;charset=utf-8'}),<br \/>\n        rdomURL = self.URL || self.webkitURL || self,<br \/>\n        rurl = rdomURL.createObjectURL(rsvg),<br \/>\n        rslidename=slidename,<br \/>\n        imgc = new Image;<br \/>\n<br \/> <br \/>\n    <font color=blue>if (rawSVG.indexOf('transparent') != -1 || rawSVG.indexOf(window.btoa('transparent')) != -1) {<br \/>\n      istransparent=true;<br \/>\n<br \/>      \/\/document.getElementById('mycanvas').getContext('2d').clearRect(0,0,document.getElementById('mycanvas').width,document.getElementById('mycanvas').height);<br \/>\n    } else {<br \/>\n      istransparent=false;<br \/>\n   \/\/document.getElementById('mycanvas').getContext('2d').fillStyle='white';<br \/>\n<br \/>   \/\/document.getElementById('mycanvas').getContext('2d').fillRect(0,0,document.getElementById('mycanvas').width,document.getElementById('mycanvas').height);<br \/>\n    }<\/font><br \/>\n<br \/>\n    imgc.onload = function () {<br \/>\n        <font color=blue>if (istransparent) {<br \/>\n          document.getElementById('mycanvas').width=imgc.width;<br \/>\n          document.getElementById('mycanvas').height=imgc.height;<br \/>\n<br \/>          document.getElementById('mycanvas').getContext('2d').clearRect(0,0,document.getElementById('mycanvas').width,document.getElementById('mycanvas').height);<br \/>\n        } else if (1 == 1) {<br \/>\n          document.getElementById('mycanvas').getContext('2d').fillStyle='white';<br \/>\n<br \/>          document.getElementById('mycanvas').getContext('2d').fillRect(0,0,document.getElementById('mycanvas').width,document.getElementById('mycanvas').height);<br \/>\n        }<\/font><br \/>\n        document.getElementById('mycanvas').getContext('2d').drawImage(this, 0, 0);<br \/>\n        rdomURL.revokeObjectURL(rurl);<br \/>\n        slideupdate(this, rslidename);<br \/>\n    };<br \/>\n<br \/>\n    imgc.src = rurl;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; and &#8230;<\/li>\n<li>the &#8220;+&#8221; means by which we involve our Scribble and Annotation helper (of animated GIF slide content) now has a new button (with its <font color=purple><i>onclick<\/i> event function<\/font>) to ask about its main canvas element background colour &#8230;<br \/>\n<code><br \/>\n<font color=purple>function colourize() {<br \/>\n   var huhcol=prompt('Enter canvas background colour or Cancel to ignore.', 'transparent');<br \/>\n   if (huhcol != null) {<br \/>\n     if (huhcol.trim() != '') {<br \/>\n      if (huhcol == 'transparent') {<br \/>\n      \/\/alert(987);<br \/>\n        \/\/alert('topielem.width=' + topielem.width);<br \/>\n        parent.document.getElementById('topcanvas').getContext('2d').fillStyle = huhcol;<br \/>\n<br \/>        parent.document.getElementById('topcanvas').getContext('2d').clearRect(0,0,parent.document.getElementById('topcanvas').width,parent.document.getElementById('topcanvas').height);<br \/>\n      } else {<br \/>\n        parent.document.getElementById('topcanvas').getContext('2d').fillStyle = huhcol;<br \/>\n<br \/>        parent.document.getElementById('topcanvas').getContext('2d').fillRect(0,0,parent.document.getElementById('topcanvas').width,parent.document.getElementById('topcanvas').height);<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n}<\/font><br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>And so, we reckon it&#8217;s &#8220;transparent&#8221; <font size=1>(chortle, chortle)<\/font> that yesterday&#8217;s <a title='Animated GIF Creation Automation Tutorial' href='#agifcat'>Animated GIF Creation Automation Tutorial<\/a>, created at home, and where <font size=1>(the vast majority of some readers know)<\/font> &#8230;<\/p>\n<blockquote><p>\n<font size=2>Transparency begins at <font style='visibility:visible;color:rgba(255,255,255,0.0);'>home<\/font>. <font size=1>Can someone please hand me the lemon juice.<\/font><\/font>\n<\/p><\/blockquote>\n<p> &#8230; in &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a><\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------------------------------GETME' title='signature_signature.js'>signature_signature.js<\/a> external Javascript with <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'>its changes<\/a> for you to examine, or you could try this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<p> &#8230; is worth a <sub>re-<\/sub>look.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-transparency-tutorial\/'>Animated GIF Creation Transparency Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifcat'>Previous relevant <a target=_blank title='Animated GIF Creation Automation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-automation-tutorial\/'>Animated GIF Creation Automation 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\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Creation Automation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_circle_terminology.gif\" title=\"Animated GIF Creation Automation Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Creation Automation Tutorial<\/p><\/div>\n<p>There are two competing issues going on with software development, of complexity, to challenge the skillset of the programmer &#8230;<\/p>\n<ul>\n<li>keeping at an issue as it is fresh, and not letting go, as much as anything to keep up with where you are at, as with it being fresh in the mind &#8230; versus &#8230;<\/li>\n<li>useful revisits after a bit of time to review the issue with fresher eyes, can often iron out issues not seen in &#8220;the heat of battle&#8221;<\/li>\n<\/ul>\n<p>Today sees us relieved, undertaking a &#8220;second of the options above&#8221; scenario, regarding us creeping up on more Animated GIF Creation automation ideas we last talked about, with any depth, at <a title='Animated GIF Link Image Slide Tutorial' href='#agiflist'>Animated GIF Link Image Slide Tutorial<\/a>.<\/p>\n<p>What prompted the interest, just now, with this?   Well, yesterday&#8217;s <a target=_blank title='Animated GIF Creation Localhost Text Emoji Slide Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-localhost-text-emoji-slide-tutorial'>Animated GIF Creation Localhost Text Emoji Slide Tutorial<\/a>&#8216;s better and non-third-party and independent use of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> &#8230; to &#8230;<\/li>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> &#8230; via &#8230;<\/li>\n<li>[canvasElement].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>(&#8216;image\/jpeg&#8217;, 10) &#8230; way to derive a data URI for &#8230;<\/li>\n<li>textbox &#8230; representing an Animated GIF slide content mechanism<\/li>\n<\/ul>\n<p> &#8230; rather than rely on <a target=_blank title='ImageMagick software suite' href='https:\/\/www.imagemagick.org\/'>ImageMagick<\/a> convert<sub>ing<\/sub> from SVG to PNG was a bit of a game changer for us.  We thought the extending of its use to other parts of the web application would be a good move.  Along <font color=blue>this way<\/font> we also worked out that our Animated GIF dimensioning <font color=purple>also needed some tweaking<\/font> at a new HTML form <i>onsubmit<\/i> <font color=darkgreen>event function<\/font> intervention point &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n<font color=darkgreen>function dothem() {<\/font><br \/>\n  <font color=blue>for (var iijj=0; iijj&lt;slidecmds.length; iijj++) {<br \/>\n    eval(slidecmds[iijj]);<br \/>\n  }<\/font><br \/>\n  <font color=purple>if (document.getElementById('selwhs')) {<br \/>\n  if (document.getElementById('selwhs').value.indexOf(',') != -1) {<br \/>\n  owoh(document.getElementById('selwhs'));<br \/>\n  }<br \/>\n  }<\/font><br \/>\n<font color=darkgreen>}<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> used in link below &#8230;<\/p>\n<p><a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTps:\/\/[HtmlWebpageWithSVG].htm<sub>l+++++<\/sub><\/font><\/a><\/p>\n<p> &#8230; the revisiting of which showed us that the <a target=_blank title='Circle Terminology' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html'>Circle Terminology<\/a> <a target=_blank title='Circle Terminology' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html-GETME'>circle_terminology.html<\/a> SVG based HTML and Javascript <a target=_blank title='Circle Terminology' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html-GETME'>also needed tweaking<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-automation-tutorial\/'>Animated GIF Creation Automation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agiflist'>Previous relevant <a target=_blank title='Animated GIF Link Image Slide Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-link-image-slide-tutorial\/'>Animated GIF Link Image Slide 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\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Link Image Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_links_qr_ss.gif\" title=\"Animated GIF Link Image Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Link Image Slide Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated GIF SVG Slide Tutorial' href='#agifsvgst'>Animated GIF SVG Slide Tutorial<\/a> had us &#8230;<\/p>\n<ul>\n<li>taking our animated GIF creator &#8230; starting with &#8230;<\/li>\n<li>SVG user entry functionality &#8230; then allow for &#8230;<\/li>\n<li>other image extraction from HTML user input via <i>+<\/i> &#8230; and today &#8230;<\/li>\n<li>&#8220;a&#8221; link to either &#8230;\n<ol>\n<li>QR Code &#8230; via <i>++<\/i> &#8230; or &#8230;<\/li>\n<li>Webpage Screenshot &#8230; via <i>++++<\/i><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Do you see the pattern here?  If you have a favoured character (ie. &#8220;+&#8221; here) involved in a user functionality behaviour decision you can give each a &#8230;<\/p>\n<p><code><br \/>\npower of 2 number of characters<br \/>\n<\/code><\/p>\n<p> &#8230; (functionality meaning) and at the Javascript or PHP interpretive end of this arrangement you can know exactly what the user wants <font size=1>(in a way akin to how a bitmap can often be used)<\/font> &#8230; so far this Javascript working (and tailorable into the future with some tweaking) as per &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction srchrefit(inbg) {<br \/>\n  var outbg=inbg, outbis=[], ibis=0;<br \/>\n  var ourblankend=blankend;<br \/>\n  if (blankend != '') {<br \/>\n    if (eval(eval('' + ourblankend.length) % 2) == 1) {  \/\/ process img<br \/>\n       ourblankend=ourblankend.substring(1);<br \/>\n       outbg=outbg.replace(\/data\\:image\\\/svg\\+xml\/g, '!@#$%^&');<br \/>\n       outbg=outbg.replace(\/data\\:image\/g, ' SRC=\\\"  data:image');<br \/>\n       outbg=outbg.replace(\/\\!\\@\\#\\$\\%\\^\\&\/g, 'data:image\/svg+xml');<br \/>\n       outbis=outbg.split('&lt;img');<br \/>\n       console.log('outbis.length=' + outbis.length + ' and outbg=' + outbg);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' src=\\\"') != -1) {<br \/>\n          outbg=outbg.replace('&lt;img' + outbis[ibis].split('&gt;')[0], '&lt;img' + outbis[ibis].split('&gt;')[0].replace(' src=\\\"', ' SRC=\\\"  '));<br \/>\n        }<br \/>\n       }<br \/>\n   }<br \/>\n    if (eval('' + ourblankend.length) == 4) {  \/\/ process \"a\" links to Webpage Screenshot<br \/>\n       outbis=outbg.split('&lt;a');<br \/>\n       console.log('outbis.length=' + outbis.length);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' href=\\\"') != -1) {<br \/>\n           outbg=outbg.replace('&lt;a' + outbis[ibis].split('&gt;')[0], '&lt;a' + outbis[ibis].split('&gt;')[0].replace(' href=\\\"', ' SRC=\\\"    '));<br \/>\n         }<br \/>\n       }     \/\/ ... or ...<br \/>\n    } else if (eval('' + ourblankend.length) == 2) { \/\/ process \"a\" links to QR Code<br \/>\n       outbis=outbg.split('&lt;a');<br \/>\n       console.log('outbis.length=' + outbis.length);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' href=\\\"') != -1) {<br \/>\n           outbg=outbg.replace('&lt;a' + outbis[ibis].split('&gt;')[0], '&lt;a' + outbis[ibis].split('&gt;')[0].replace(' href=\\\"', ' SRC=\\\"   '));<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n    return outbg;<br \/>\n  }<br \/>\n  return inbg;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> &#8230;<\/p>\n<p><a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTp:\/\/[HtmlWebpageWithSVG].htm<sub>l+++<\/sub><\/font><\/a><\/p>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a> extracting SVG and hidden non-SVG images and one &#8220;a&#8221; link presented as a QR Code) &#8230;<\/p>\n<p><a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTps:\/\/[HtmlWebpageWithSVG].htm<sub>l+++++<\/sub><\/font><\/a><\/p>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a> extracting SVG and hidden non-SVG images and one &#8220;a&#8221; link presented as a Webpage Screenshot).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-link-image-slide-tutorial\/'>Animated GIF Link Image Slide Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifsvgst'>Previous relevant <a target=_blank title='Animated GIF SVG Slide Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-slide-tutorial\/'>Animated GIF SVG Slide 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\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF SVG Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_svg.gif\" title=\"Animated GIF SVG Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF SVG Slide Tutorial<\/p><\/div>\n<p>The PHP <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> library we use to help create animated GIFs (along with a whole lot of other help, it goes without saying) is not into <i>vector graphics<\/i> which is what &#8230;<\/p>\n<ul>\n<li><a target=_blank title=Inkscape href='https:\/\/inkscape.org\/'>Inkscape<\/a> &#8230; as a vector graphics editor &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> &#8230; ie. Scalable Vector Graphics<\/li>\n<\/ul>\n<p> &#8230; are <i>really<\/i> into <font size=1> &#8230; ooooohhh, aaaaahhhh &#8230;<\/font> but luckily for us, the great <a target=_blank title='ImageMagick software suite' href='https:\/\/www.imagemagick.org\/'>ImageMagick<\/a> offers functionality to convert a SVG image file into a PNG image file, via &#8230;<\/p>\n<table>\n<tr>\n<th>Non Windows<\/th>\n<th>Windows<\/th>\n<\/tr>\n<tr>\n<td>convert infile.svg outfile.png<\/td>\n<td>magick.exe infile.svg outfile.png<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and we&#8217;re using that talent ImageMagick has to offer the user the chance, at any animated GIF slide textbox, the chance to enter <a target=_blank title='Javascript encodeURIComponent information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a> and <a target=_blank title='Javascript window.btoa information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>window.btoa<\/a> sensitive entries whose (content) format could match (one of) &#8230;<\/p>\n<ul>\n<li>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt;<\/li>\n<li>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt;<\/li>\n<li>data:image\/svg+xml;utf8,&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt;<\/li>\n<li>data:image\/svg+xml;utf8,&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt;<\/li>\n<li>data:image\/svg+xml;base64,<font size=1>base 64 encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li>data:image\/svg+xml;base64,<font size=1>base 64 encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>base 64 encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>base 64 encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>encode URI encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>encode URI encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li>SVG media file relative or absolute URL (ie. ends in <i>.svg<\/i>)<\/li>\n<li>hTTp<sub>s<\/sub>:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/li>\n<li>at address bar involve a <font color=blue>get argument<\/font> whereby &#8230;<br \/>\n<blockquote><p>\n<a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTp:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/font><\/a>\n<\/p><\/blockquote>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a>) &#8230;<\/p>\n<blockquote><p>\n<a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTps:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/font><\/a>\n<\/p><\/blockquote>\n<p> &#8230; which fills in the slide data and then goes and tries to create the resultant animated GIF (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a>)\n<\/li>\n<\/ul>\n<p> &#8230; means by which a user can involve SVG input slides into their animated GIF creations in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> further to yesterday&#8217;s <a title='Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial' href='#agifsqrcwsurlt'>Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/a>.<\/p>\n<p>Below is a new (PHP writes) Javascript iframe (<i>iois<\/i> object below) onload event function for recognizing <i>hTTp<sub>s<\/sub>:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/i> as above, and setting the iframe&#8217;s &#8220;src&#8221; attribute to its value &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mm1='', mm2='', mm3='';<br \/>\n  var gdgebimm='', gtval='', onealready='';<br \/>\n  var tvals=[], thistval=0, thistdelim='', thistid='';<br \/>\n<br \/> <br \/>\nfunction latermm() {<br \/>\n   maybemore(mm3.value, mm2, mm3);<br \/>\n   mm1='';<br \/>\n   mm2='';<br \/>\n   mm3='';<br \/>\n}<br \/>\n<br \/>\nfunction svgmmcallol(iois, tid) {<br \/>\n    \/\/alert('TID=' + tid);<br \/>\n  var tval='', it=0, dgebimm='';<br \/>\n  var tis=document.getElementById(tid);<br \/>\n  thistid=tid;<br \/>\n  tvals=[];<br \/>\n  thistval=0;<br \/>\n  thistdelim='';<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n       tval=aconto.body.innerHTML;<br \/>\n    \/\/alert('Tval=' + tval);<br \/>\n  if (tval.indexOf(encodeURIComponent('data:image\/svg+xml')) != -1) {<br \/>\n    thistval=1;<br \/>\n    tvals=tval.split(encodeURIComponent('data:image\/svg+xml'));<br \/>\n    thistdelim=encodeURIComponent('data:image\/svg+xml');<br \/>\n    \/\/alert('thistdeliM=' + thistdelim);<br \/>\n<br \/> <br \/>\n    tval='data:image\/svg+xml' + decodeURIComponent(tvals[thistval].split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(')')[0].split('&')[0].split('&gt;')[0]);<br \/>\n    \/\/alert('tvAl=' + tval);<br \/>\n    \/\/alert('tId=' + tid);<br \/>\n<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf('data:image\/svg+xml') != -1) {<br \/>\n    thistval=1;<br \/>\n    tvals=tval.split('data:image\/svg+xml');<br \/>\n    thistdelim='data:image\/svg+xml';<br \/>\n    tval='data:image\/svg+xml' + tvals[thistval].split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(')')[0].split('&')[0].split('&gt;')[0];<br \/>\n<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf(encodeURIComponent('&lt;svg')) != -1 || tval.indexOf(encodeURIComponent('&lt;SVG')) != -1) {<br \/>\n    thistval=1;<br \/>\n    if (tval.indexOf(encodeURIComponent('&lt;svg')) != -1) {<br \/>\n    tvals=tval.split(encodeURIComponent('&lt;svg'));<br \/>\n    thistdelim=encodeURIComponent('&lt;svg');<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;svg' + decodeURIComponent(tvals[thistval].split(encodeURIComponent('&lt;\/svg&gt;'))[0]) + '&lt;\/svg&gt;';<br \/>\n    } else {<br \/>\n    tvals=tval.split(encodeURIComponent('&lt;SVG'));<br \/>\n    thistdelim=encodeURIComponent('&lt;SVG');<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;SVG' + decodeURIComponent(tvals[thistval].split(encodeURIComponent('&lt;\/SVG&gt;'))[0]) + '&lt;\/SVG&gt;';<br \/>\n    }<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf(window.btoa('&lt;svg')) != -1 || tval.indexOf(window.btoa('&lt;SVG')) != -1) {<br \/>\n    thistval=1;<br \/>\n    if (tval.indexOf(window.btoa('&lt;svg')) != -1) {<br \/>\n    tvals=tval.split(window.btoa('&lt;svg'));<br \/>\n    thistdelim=window.btoa('&lt;svg');<br \/>\n    tval='data:image\/svg+xml;base64,' + window.btoa('&lt;svg') + tvals[thistval].split(window.btoa('&lt;\/svg&gt;'))[0] + window.btoa('&lt;\/svg&gt;');<br \/>\n    } else {<br \/>\n    tvals=tval.split(window.btoa('&lt;SVG'));<br \/>\n    thistdelim=window.btoa('&lt;SVG');<br \/>\n    tval='data:image\/svg+xml;base64,' + window.btoa('&lt;SVG') + tvals[thistval].split(window.btoa('&lt;\/SVG&gt;'))[0] + window.btoa('&lt;\/SVG&gt;');<br \/>\n    }<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.toLowerCase().indexOf('&lt;svg') != -1) {<br \/>\n    if (tval.indexOf('&lt;svg') != -1) {<br \/>\n    thistdelim='&lt;svg';<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;svg' + tvals[thistval].split('&lt;\/svg&gt;')[0] + '&lt;\/svg&gt;';<br \/>\n    } else {<br \/>\n    thistdelim='&lt;SVG';<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;SVG' + tvals[thistval].split('&lt;\/SVG&gt;')[0] + '&lt;\/SVG&gt;';<br \/>\n    }<br \/>\n    \/\/alert('Thistdelim=' + thistdelim);<br \/>\n    tvals=tval.split('&lt;svg');<br \/>\n    thistval=1;<br \/>\n    \/\/alert('1:tval=' + tval);<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/alert('2:tval=' + tval);<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n \/\/alert('0: ' + dgebimm);<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n \/\/alert('1: ' + dgebimm);<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/alert('3:tval=' + tval);<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-slide-tutorial\/'>Animated GIF SVG Slide Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifsqrcwsurlt'>Previous relevant <a target=_blank title='Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-slide-qr-code-and-webpage-screenshot-url-tutorial\/'>Animated GIF Slide QR Code and Webpage Screenshot URL 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\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animegif_webpage_screenshot.jpg\" title=\"Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/p><\/div>\n<p>We wanted, today, to channel the <font size=1>(cruel might say &#8220;warped&#8221;)<\/font> thinking behind the recent URL &#8230;<\/p>\n<ol>\n<li>interactive entry of absolute URL starting with HtTp means you want a QR Code &#8230; and &#8230;<\/li>\n<li>interactive entry of absolute URL starting with hTtP means you want <font size=1>(to involve, along the line, creating an animated QR Code scenario)<\/font> a Webpage Screenshot<\/li>\n<\/ol>\n<p> &#8230; we last talked about at <a target=_blank title='Circular Text Around Media Animated QR Code Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-animated-qr-code-tutorial'>Circular Text Around Media Animated QR Code Tutorial<\/a>, because we feel this is actually a good inhouse idea to hang on to as a principle.  Why?!  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=OhdvhVX0Dfo&#038;themeRefresh=1'>Glad you asked.<\/a>  It is another way to &#8230;<\/p>\n<ul>\n<li>end up with an image &#8230;<\/li>\n<li>from a<font size=1>ny old absolute <i style='color:darkgray;'>(but we have not yet researched ? and &#038; get argument(s) regarding)<\/i><\/font> URL<\/li>\n<\/ul>\n<p> &#8230; really suiting the purpose of today&#8217;s work, that being the integration of this idea into <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> we last talked about at <a target=_blank title='PdfImages PDF Output Media Zipping via PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdfImages-pdf-output-media-zipping-via-php-tutorial\/'>PdfImages PDF Output Media Zipping via PHP Tutorial<\/a>.  After all, an animated GIF slide is also an image, and it could be used in this way, to &#8230;<\/p>\n<ol>\n<li>create animated GIF of QR Code means by which a smart device user using their Camera might navigate to a series of interesting webpage(s) &#8230; or &#8230;<\/li>\n<li>create animated GIF of &#8220;current <font size=1>snapshot<\/font> looks&#8221; of a series of URLs of interest <font size=1>(with even more currency than Google Earth shows your place!)<\/font><\/li>\n<\/ol>\n<p>It might be you design an animated GIF chapter of slides and always want to follow it up with a &#8220;further reading&#8221; webpage you could present as a QR Code or Webpage Screenshot.<\/p>\n<p>Anyway, at the <font color=purple>&#8220;onblur&#8221; event Javascript function<\/font> logic <font color=blue>we intervened<\/font> to end up with an image\/png data URI substitute for the HtTp or hTtP URL the user enters to re-enter the normal animated GIF image definition workflow of the animated GIF creator &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mm1='', mm2='', mm3='';<br \/>\n<br \/> <br \/>\nfunction latermm() {<br \/>\n   maybemore(mm3.value, mm2, mm3);<br \/>\n   mm1='';<br \/>\n   mm2='';<br \/>\n   mm3='';<br \/>\n}<br \/>\n<br \/>\n<font color=purple>function maybemore(tval, tid, tis) {<\/font><br \/>\n  var newi=null, fo=null;<br \/>\n  var inmb=0;<br \/>\n  <font color=blue>if (tval.indexOf('HtTp') == 0) {<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=tis;<br \/>\n    document.getElementById('mmcall').innerHTML='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?justcontent=&askfor=' + encodeURIComponent(document.URL.split('\/\/')[0] + '\/\/chart.googleapis.com\/chart?chs=300x300&cht=qr&chl=' + encodeURIComponent('http' + encodeURIComponent(tval.substring(4).replace('S:','s:'))) + '&choe=UTF-8') + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf('hTtP') == 0) {<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=tis;<br \/>\n    document.getElementById('mmcall').innerHTML='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=&askyou=' + encodeURIComponent('http' + tval.substring(4).replace('S:','s:')) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  }<\/font><br \/>\n\/\/ rest of maybemore follows ...<br \/>\n<font color=purple>}<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to help introduce this new animated GIF slide functionality arrangement.<\/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='#d59257' onclick='var dv=document.getElementById(\"d59257\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slide\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59257' 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='#d59274' onclick='var dv=document.getElementById(\"d59274\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/btoa\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59274' 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='#d59312' onclick='var dv=document.getElementById(\"d59312\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/character\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59312' 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='#d60759' onclick='var dv=document.getElementById(\"d60759\"); 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='d60759' 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='#d60769' onclick='var dv=document.getElementById(\"d60769\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/transparent\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60769' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You might have heard &#8230; Transparency begins at home. &#8230; or not, because as far as we know, we just sprouted it?! Nevertheless, this matter of &#8230; image transparency &#8230; in terms of the image being an Animated GIF slide &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-transparency-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,14,37],"tags":[83,84,3456,3898,85,119,126,2682,4482,2829,184,2525,4480,224,2650,385,415,3330,4210,4481,451,4479,1828,3453,513,529,541,590,1658,1577,2533,714,2410,744,2411,932,997,1841,1149,1226,3889,1254,2324,1302,2996,1319,1352,4483,1433,3010],"class_list":["post-60769","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-animation-2","tag-annotate","tag-annotating","tag-apache","tag-automation","tag-background","tag-background-colour","tag-background-color","tag-btoa","tag-canvas","tag-child","tag-clearrect","tag-colour","tag-convert","tag-emoji","tag-ffmpeg","tag-fill","tag-fillrect","tag-fillstyle","tag-font","tag-font-colour","tag-font-family","tag-font-size","tag-google","tag-google-pagespeed","tag-graphics","tag-image","tag-imagemagick","tag-interface","tag-line-feed","tag-local-web-server","tag-localhost","tag-mamp","tag-parent","tag-php","tag-programming","tag-scribble","tag-slide","tag-svg","tag-svgxml","tag-text","tag-todataurl","tag-transparency","tag-transparent","tag-tutorial","tag-utf-8","tag-window-btoa","tag-window-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60769"}],"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=60769"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60769\/revisions"}],"predecessor-version":[{"id":60783,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60769\/revisions\/60783"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}