{"id":59306,"date":"2023-05-06T03:01:06","date_gmt":"2023-05-05T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59306"},"modified":"2023-05-06T10:57:47","modified_gmt":"2023-05-06T00:57:47","slug":"animated-gif-html-image-slide-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-html-image-slide-tutorial\/","title":{"rendered":"Animated GIF HTML Image Slide 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 HTML Image Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animated_gif_html_image_extraction.gif\" title=\"Animated GIF HTML Image Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF HTML Image Slide Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Animated GIF SVG Slide Tutorial' href='#agifsvgst'>Animated GIF SVG Slide Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>SVG vector image extraction from HTML input &#8230; today we want to add in &#8230;<\/li>\n<li>an additional <i>+<\/i> suffix will look for other HTML img element data in the user defined <i>hTTp<\/i> specified URL to point at their input HTML data source, for this<\/li>\n<\/ul>\n<p>It&#8217;s early days but we do not need ImageMagick here, so we think we can get places using <a target=_blank title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)'>Ajax<\/a> calling code like &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nif (imgurl.toLowerCase().indexOf('http') == 0) {<br \/>\n  if (1 == 1) {<br \/>\n   imos.push(new XMLHttpRequest());<br \/>\n   imos[eval(-1 + imos.length)].title=imgurl;<br \/>\n   imos[eval(-1 + imos.length)].onreadystatechange = function() {<br \/>\n    var sid=1, x, ttl, sfx='', lastok='';<br \/>\n    var defdata='data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQAAAQABAAD\/4hEsSUNDX1BST0ZJTEUAAQEAABEcYXBwbAIAAABtbnRyUkdCIFhZWiAH2wABAAIACwA1ABxhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWFwcGyThxqxibpi\/+1vXKPmkabrAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5yWFlaAAABLAAAABRnWFlaAAABQAAAABRiWFlaAAABVAAAABR3dHB0AAABaAAAABRjaGFkAAABfAAAACxyVFJDAAABqAAAAA5nVFJDAAABuAAAAA5iVFJDAAAByAAAAA52Y2d0AAAB2AAABhJuZGluAAAH7AAABj5kZXNjAAAOLAAAAGRkc2NtAAAOkAAAAj5tbW9kAAAQ0AAAAChjcHJ0AAAQ+AAAACRYWVogAAAAAAAAYXIAADePAAAHA1hZWiAAAAAAAABtmgAAsecAAByrWFlaIAAAAAAAACfJAAAWpQAAr3dYWVogAAAAAAAA81IAAQAAAAEWz3NmMzIAAAAAAAEMQgAABd7\/\/\/MmAAAHkgAA\/ZH\/\/\/ui\/\/\/9owAAA9wAAMBsY3VydgAAAAAAAAABAc0AAGN1cnYAAAAAAAAAAQHNAABjdXJ2AAAAAAAAAAEBzQAAdmNndAAAAAAAAAAAAAMBAAACAAAATgEEAT4BiQHlAisCagKxAv8DPAN9A8IEDwRzBN4FbQYZBvoIFwl+CyUNDw9IEZQT9RZJGDIaDxvVHYwfOCDTImQj7SVxJvcogCoNK5Is5S4SLz0wbjGiMtk0GDVWNpM30DkMOkM7ezy4Pfg\/OUBrQZZCukPYRPBGCEcgSDlJWkqAS51MkE1pTkFPHE\/3UNVRtFKUU3JUTlUnVf1W0VesWJRZh1p7W3RcbV1rXmxfamBqYWZiYWNUZE5lqmcVaH9p6GtIbKFt7G8ucGdxj3Kxc8l02nXjduh373j6egV7EHwcfSZ+L38zgDOBLoIkgyKEN4VThmyHgYiRiZ6KsIvDjNyN\/Y8nkFqRlZKuk62Uq5Wtlq+Xt5i9mcKaxZvHnMWdvZ60n6qg1aH4oxGkJKUvpjWnNqg2qTaqO6tDrFCtWK5Drxqv6rC9sZGyZbM5tA6037Wttne3P7gDuMO5gbpBuwW7zLyYvWe+N78Jv9vAqsF4wkXDIsQoxUvGbceIyJzJrcq7y8jM2s3xzw\/QNdFb0mHTP9QL1NrVqtZ811DYItjy2cHai9tS3Bbc2d3N3sffveCr4ZPieeNd5EHlJuYN5vzn7ujn6cjqjetP7BPs2u2j7mzvNvAA8Mfxi\/JN8w3zy\/ST9V\/2MPcH9+X4yvm0+qb7mvyQ\/Yn+hP9V\/\/8AAABXAQoBSgGeAgMCUQKqAwsDXgO5BBgEcgTSBUcF0gaCB14IeQnUC4kNkA\/SEjIUjhbLGOsa9BzqHs0gnCJbJAwlpCc5KMcqUyviLXMu\/zBOMXcymzPCNO02FTdDOGo5jjqsO8Y82j3sPwVAMEFXQndDj0SgRa1Gt0fBSMxJ20rwTAtNJ04fTwtP91DmUdZSyFO6VKxVmVaEV21YU1kxWg5a71vVXL5dql6ZX45ghWF8YnRjamRgZVBmSWegaQlqc2vdbT5um2\/pcTBycHOfdMl16XcDeBd5KXpAe1x8eH2XfrZ\/1YDzgg6DJYQ3hUWGV4eUiM6KAoswjFWNc46Oj6aQv5HakvyUJpVOll6XVphLmUSaQZtBnEKdQ55Dn0KgP6E5oi+jNKRapYamqafCqNOp36rmq+us8a36rwiwG7Eosh+zBLPktMi1rbaSt3q4YblHuim7CbvnvMG9lL5nvzzAE8DswcnCp8OCxF7FOMYPxuLHs8iKyXvKest3zG3NXs5MzzfQItER0gPS\/dP81QDV8ta914TYTdkX2ePasdt93EndEd3X3pnfWOAe4Prh4OLD457kdOVI5hrm6+e\/6JbpcupT6zPsCOzA7XjuMe7s76jwZvEj8eHym\/NU9Ar0vfVv9iL22PeS+FD5EvnZ+qX7dPxF\/Rf96\/6\/\/2j\/\/wAAAEcA+AE\/AZIB+QJHApwC\/ANOA6YEBgRuBN0FbAYVBtoHtQirCcEK+gxqDfcPqxFvE0gVHha0GEMZvhsuHI8d6x85IIAhxiMPJFolqSb2KBcpFioTKxUsFy0XLhovGDARMQYx+DLkM840vDWwNqU3lDh7OV06OzsSO+s8xT2gPn8\/ZEBKQQNBtEJjQxRDx0R8RTJF6UaeR1NIBki2SWVKEUrBS3JMJUzZTY5ORU78T7JQZ1EYUcdSc1MbU8FUZlUSVcFWclckV9VYh1k3WeFah1slW7xcUFz\/XaxeVV71X5VgNWDZYYNiO2MDY9xkyWXUZwFoM2liaoxrsWzSbfRvF3A\/cWpynXPVdQx2I3ceeBh5G3oqe0B8Yn2JfrJ\/3YEFgiaDQYRXhXyGsofhiQqKK4tEjFKNV45Sj0KQKpEMkeqSx5OvlLCVrZael4CYXJkwmf+aypuSnFqdIZ3pnrKflaB4oVGiIqLuo7akeaU6pfymvqeCqEmpHaoAquurzqylrXGuOq8Dr8+wo7GAsm2zbLR9tZ22s7e8uL65wbq\/u7u8tL2tvqe\/n8CWwY3CjMOixM3F8ccWyDjJWcp7y6LMys39zzXQdNG10trT0dTS1d\/W99gf2VTalNvh3T3en+AG4W\/i2ORD5bfnYOkr6xTtL+958gH01\/fl+xj+Nf\/\/AABuZGluAAAAAAAABjYAAJhfAABYFgAAUywAAI+qAAAobAAAFWAAAFANAABUOQACD1wAAi4UAAFwowADAQAAAgAAAAoAPQChATABoQHwAi4CYQKNArQC2QL6AxwDOgNYA3YDlAOyA88D7gQNBCwEUgR7BKQEzwT8BSoFWgWMBb8F9AYsBmUGoAbcBxoHWQeYB9gIGAhZCJoI5Ak3CZQJ8QpOCqsLCgtoC8YMJgyHDOoNTg20Dh0Ohw7xD1sPxhAyEKQRGhGUEhISlBMaE6EUKRSzFToVwRZGFuUXoRhiGSIZ5BqmG2kcMRz9Hc4eph+BIE8hFCHZIp0jYiQlJOglryZ2J0IoESjoKbsqUSrlK3ksDyylLT8t3S59LyQv0TCCMTkx+zLAM440YjU+NiI3BzfpOM05sTqXO388aT1XPkw\/RkBHQU9CSUMsRBVFAUXyRuhH40jbSdRKyUu7TKdNjk5wT09QSFFfUnlTkVSqVb5W1lfwWQ5aL1tUXIRdt17wX+9g9mIGYx5kP2VoZplnz2kHaj9rcmyibc9vCXB6cgpzlXUfdq14O3nPe3B9Gn7PgJaCZIQsheyHoYlTiwSMtI5tkCqR7pNllKiV55cumH2Z1ZsynJSd959WoLKiBqNTpJql7aeAqWWrRa0lrv+w27LBtKy2p7ivusC8Z74Hv6\/BacMxxP\/G0ciiynPMNc3yz6XRiNO+1e7YGNo93GTei+C+4v3lSuee6dLr++4T8BryFPQA9d\/3vfmX+239RP\/\/AAAACQA3AH4A3AFLAaEB4wIXAkQCbAKPAq8CzQLrAwcDIwM\/A1sDeAOVA7MD0wP0BBYEOgRfBIUErQTVBQAFKwVZBYgFuQXsBiAGWAaRBssHBwdEB4IHwQgACEAIgQjECRUJcAnPCi8KjwrwC1QLtwweDIcM9A1kDdcOTw7IDz8PsBAlEJ4RHBGfEiUSsBM9E8sUWhToFXUWABaOFzUX5RiVGUUZ9hqpG10cFxzVHZceXx8wIAQg1SGkInIjQCQLJNUloiZvJ0AoEyjuKcEqWCrsK4EsFyytLUct5C6DLygv0zCBMTQx8TKxM3g0RjUZNfE2yzehOHY5TDoiOvk70TyrPYg+aT9PQDpBKkIVQt5DrkSDRVxGO0ciSA9I\/0nzSuhL3UzOTbtOpU+VUKBRxlLpVApVKVZFV2NYg1mmWstb9V0nXlxfdGBtYXFifGORZK9l02cAaDBpYmqTa79s6G4Pb0lwrHIfc410+nZpd9Z5RXq8fDt9v39OgOuCjIQphcOHWIjtioiMJI3Lj3uRNJLilFWVwZc3mLmaRZvZnXCfBaCVohujmaUOppeofqpurFyuRrAvshy0E7YWuCa6RbwgveO\/r8GQw3\/FdMdwyWfLWM07zxfRCNNW1arX99pA3Ire1uEv45fmEOiP6wLtaO+78gL0OfZo+Jb6wfzt\/\/8AAAALADkAgwDkAUQBjAHMAggCPwJyAqICzQL3AyADRwNuA5UDvAPiBAoEMgRhBJIExAT6BTEFawWoBecGKAZtBrQG\/QdHB5IH3ggqCHcIxwkmCZIKAApuCt4LUQvFDD0Mug07DcAOTA7aD2YP8RCBERkRuBJdEwkTtxRnFRcVxBZwF0wYOhknGhQbAxv0HOwd6h7yIAEhDiIbIyokOSVLJmQnhiizKe4rMyxuLaYu3jAaMV0ysjQjNbI3AjhpOec7aTzgPjg\/b0CJQYpCaUM8RBVE70XORrJHmkiESW9KWUtBTChNCk3sTslPsVC8UeBS\/FQPVRhWHVcYWBJZDFoFWwBcAV0JXhhfK2AuYSZiJGMoZDNlRWZhZ4lovWn\/a1JstG4gb5dw\/3JBc4h043ZXd9h5b3sTfMF+c4AngeCDZYTrhouIPYn\/i8+Np4+AkVeTJZTKllSX7pmnm3qdVp8woPmirqRBpbmnG6htqdOrSazLrk2v2bFosv+0l7Yvt8y5bLsOvKK+EL9rwNHCNsOhxQ7GfcfryVLKvcwazXXOy9Ad0W\/S5NSe1kjX4tlv2ujcVd223w7gXeGg4uHkHuVY5pLnzekJ6kPrfeyt7bvuvu+48KjxlfJw80f0E\/Tb9Zj2S\/b+96H4Qvji+Xj6Dvqk+zT7xPxU\/OP9cf3\/\/ub\/\/wAAZGVzYwAAAAAAAAAKQ29sb3IgTENEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG1sdWMAAAAAAAAAEgAAAAxuYk5PAAAAEgAAAOhwdFBUAAAAFgAAAPpzdlNFAAAAEAAAARBmaUZJAAAAEAAAASBkYURLAAAAHAAAATB6aENOAAAADAAAAUxmckZSAAAAEgAAAVhqYUpQAAAADgAAAWplblVTAAAAEgAAAXhwbFBMAAAAEgAAAYpwdEJSAAAAGAAAAZxlc0VTAAAAEgAAAbR6aFRXAAAADgAAAcZydVJVAAAAJAAAAdRrb0tSAAAADAAAAfhkZURFAAAAEAAAAgRubE5MAAAAFgAAAhRpdElUAAAAFAAAAioARgBhAHIAZwBlAC0ATABDAEQATABDAEQAIABhACAAQwBvAHIAZQBzAEYA5AByAGcALQBMAEMARABWAOQAcgBpAC0ATABDAEQATABDAEQALQBmAGEAcgB2AGUAcwBrAOYAcgBtX2mCcgAgAEwAQwBEAMkAYwByAGEAbgAgAEwAQwBEMKsw6TD8ACAATABDAEQAQwBvAGwAbwByACAATABDAEQASwBvAGwAbwByACAATABDAEQATABDAEQAIABDAG8AbABvAHIAaQBkAG8ATABDAEQAIABjAG8AbABvAHJfaYJybbJmdphveTpWaAQmBDIENQRCBD0EPgQ5ACAEFgQaAC0ENAQ4BEEEPwQ7BDUEOc7st+wAIABMAEMARABGAGEAcgBiAC0ATABDAEQASwBsAGUAdQByAGUAbgAtAEwAQwBEAEwAQwBEACAAYwBvAGwAbwByAGkAAG1tb2QAAAAAAAAGEAAAnFwAAAAAwEuKAAAAAAAAAAAAAAAAAAAAAAB0ZXh0AAAAAENvcHlyaWdodCBBcHBsZSwgSW5jLiwgMjAxMQD\/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7\/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7\/wAARCAAYAQ4DASIAAhEBAxEB\/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL\/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6\/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL\/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6\/9oADAMBAAIRAxEAPwD98vIOcZT\/AL5rktX8TQad4ii0WwsLrXdaePzDZ2gQNGmDh3ZyFVSRgEkc12ZYBmz0HDe1eZa1oMl94kufEPhnX47TVBEtrMswWW0YLIH2upBweOoweayqy5VcuCu7HQaJr6axFdeZp19pNxb3LQSQ3kIU5H8SsCVZcZ5BNbqTL9qYBH+Q4YhMAH3\/AA5zXha+JdR8UeGfD9pexPpk1\/rP2O+mtnePzYl6qDndhsYxnoa2l0PSdJ+NukweHNN03TJJrOVtUgt7cRo8WMqJFXAJzxk81iq3NpY1nT5Vc6a78Q61P42u9L0G3sGt9O2DUbi+Ljl1D7Y9oJY7SDXRaPqtnrGkteWMs1ygd43BDAB1JBADAHqOp4rxbS9B8Mx\/CDxF4wm8P6LPcXd5dy2ryWEbSRoHMCBWIzyI0PWtdPBmg6b+zrNcR6Jp0eof2C0kt6lrGspLKzsMgZ4z1qY1HdiklbQ9kRw4AEMuT\/eix6f40hlQSOoCswzgADk5xj86+d7i6\/tfStC1xHii0rw5cWStLHhFnmaaGNyW7gRswz6t7V0dvq0OdV8VanDc30uq3UOn6ZaxyGMujMFQ5z8pOQSauGIT6E+yke1FoxJgqcbc5CZH6UjFfO2Ku84zwo\/D8D69K+en8MX2k+OvBSW2ieDdHkkvFJl0WyZZ4olUFlZiSGGOM47VsaXYaVqN5448V3domqtFqTpAkihoM28SjzPL+5vLbvmxu9Din7ePYXs5dz24cgfKAfRlAIoOFQkgAAEklPSvnjTtL1LxV8Mf7VvPDNjrGrX0Ustpq82oKTaEt8ix78mLAGCFxyDnrXt\/h+C6tPBVhZ6i7z3KRKkhJ3HPA69x71pGpFq9jKbcZJG0oBU\/KCwGSu0cUHYsm0hQewIAzXj2n6Rpfiv4n+LNS1yzg1Sysrn7LDBeLvhG37xCH5Tg9CRXHxXWr\/8ACjvBOl6Q0kUWrXDyFWm+z5gLFhGGXG3KkDFZe3XY29nJ9T6PZolXLAr9U\/zx79KUtEFzlQMjnaO\/Q\/T3rxNdA1HRtcg1bRvDNp4VhtLSc3n2e4iY3XCmMOqAFyu1vmOSc9axdI0vUfE\/gA61e+FINX1u8iZrbVptQQvbElwvlFstEFbBwpFP28eweyl3PoNnjWJWDKNxwhOF3H2JrmY9dmm+Kq+HIYCsaad9quJXVsqCwULuxjPOfwrz3TLM6v47j8P+Is3dlpmlo2oW1zJ5kV3O7hcyZ4lC44LZ+8a2Ph\/p1gviLxhqemWEFjE9+1tCsEQjjCxHaQNuKcZ88tBSi4rU9SLBQpbAUk87eOv9aRmRNm8FS2OPL7ntXnHxJH9pWPh7QfKaWHUNViEoUsp8tDlzlSO1YEun6V4d+Mt9Joek2VlDY+HmublraIL5kzO2wsRyz4TJJ5OfelKfI9gSckeyeYm8oApkH8IC5xkDP6\/Ws6+1ix03VLCzuGkE15IY4FWAkkhSxyAOBx1PHNeM32l6LdfAI+JNbjtrvxFcxC5tNSuVDyRTyP8Au0iZslMbEUqmOhJzV6TRdN8Q\/FLw9Za5ZWOozadoBubt7i0jmLu+1Ru3g8cPWc699kVGFtz2x8qONwY8ZxtA4J\/pXKyeIp0+K8fhq3gVolsvtNxI7cou4qOexOK6DTrGysdLFnYWlrZ2YjAWO2jVE5GOAoxXkmnaboniT4h+ONc16yhv7GC8Nkkd1GHhMccaZ3KeD827Gauc7SVtiYK6dz2Dzo1lSJvOKhcqzITnJIx046d6ljaORio2q3bIByDnB\/Q\/lXzZDNq3\/CE+FdF04zXFnqN9eTRbrjynNqJvlh3n7oIYYUcYFd7oXh+8sfiZpd\/Y+HLLwpYQ2s8WoR2t0jC5yUaPcqgZYbWO4+tUq0W7WB05JXuerTKEtJHYoFCkncMADHeuW8K67deIfCVpq11aPp5uhuiU5B2Z4AB5JI54qL4hX72fwf8AEDRgmae1NvENudzSgxqMd+WFef3\/AIS0bQNc8EQabaoNZl1OFTdyfNcPCPmdTJ98pgEbSSPakm+YTXu3Pbl2uMphh2OzAPuD3oLKCP3Zb5SThOn4e\/P5V4ZqFtD4rurvxFaaB4Su7OAyW51HXYjN55iZo2KKpATlTg1kQRTat8N\/h14aufPVr65kupEWVkaKBJX2Rgg52AMoA9BU0sQpvYqdJo+hxLGykqV6E7QoJGMZH156VzUuvSn4p23hyGFDG9g91cyZwVQFVXGO5Ld\/Q1wZ0bTLn4qt4SnsrVdCtNOF9Pp4DGO4ld9vmSKxKvgD+IGrXgSx0mD4h+NdR06ztLLT45I7KEW8SpGqruLkBeAMlM4qY1HOTSQWUVqd5o+vW+s65q9lbxThtPufs8kjgFGYDnbz2rpPIJP3k\/75rjfh\/ol1ovg64GoCI6nd3kl1csjhgWc54PcV3YGGJ7muxRstTNyu9CJ1YnIA649iMd64q88B6BcapLc\/YryDzyftEdrqNxFHMT0LIkgQ8\/3lP0ooptJiLtz4R0m+8P2+m3NhHFZwkNDDayNB5bjo4aMqwP0Iqzp\/h3TdNgdLS0lUyjE009w8szexdyzEexJoopcq7Ck3sNh8N6ZF4Vj0JdPQaQluI0iLkEDvyOc8DkHNR2XhfS7TQ7vTootQNndRmOWK4v55xtI27R5rttGCemKKKhQV2Nu5Tj8E6GvgJ\/C39mRHQmQq9tvID\/MpySOc8dRzxVq78LaTe+HbfSJbKX+zLfabeITSK0RTlSGDZ6gUUURpxQXfcq2PgfQrHXbfVIrK4uNUgRkS6u72aeTaRj78ru2ce9bGnaJY6Toh02ztCtoxbcjNu3FyWdmJ5OSepooquRBdmJH4D8PxXi+Tb6nbQCTzRbx6pcfZ8+nlb9g9cAe\/eupjtzBEUgQJHuAVFQKAMjPT270UU1FJEy1aMax8M6ZZ6TdW0Fk0EV3IZJ1MpJYsdzZP4Ulx4R0S78O2mk3GmxNp1qoW1RHZZIAFAGx1IZTx1BooqFTj2Luxlp4S0nTRI8Ftd3ksoKySX19LdyFSMbd0rMQvsKop4A8NxxCOCwvreESbvs8eqXKW+7qD5QkCkZPQjqKKKrkj2Fd9yxqPgvRNSvvtdxb3q3flCFpba\/nt96D+FhE6hl9m3D1BrR0PQbDQ9HFnptl9ktDKZvL3ljvY5JJNFFCik7ju7WH3Gh2d14jsdVntBJe2m7yJjIRs3f7PShNEso9av9QFmHu72JY7iVjkuFBCjb0AAJooocU3qF2kY9n4F0G0vI5I7Kcokhl8ia9mlgVyc5WJnKKc88KOtT6n4Q0nU9Zj1C4tJ0vkh2i5tLuW2kbDAhWMTIWHXgkj2oopKEewrs6LynAQbXYFdmN3QepPJ\/WuPj+HfheO7umFlqe24mM00Z1a7MbyHqSvm7T+VFFCigNPVPCOkatY29pd2UbwwEG3ZC0LwEdNjRlXH\/fVO0zwtp2k35mtkvpJNuPOu9RmvH6HODMzsv4GiinyoLvuXNT0m21eGCK\/tBPHFcRzR5cja8bB0YgdeQKjl0KyufElhqc1sGu7JWFrIWOEVuGH1wTRRT5Ve5Tk7WOfk+H\/AIcmmu4\/7OvIrW4dvPgTULhIXLclhGsgRcknotbMHhfS7e\/0u9isViu7CzFpaYclYoxjA9+nWiioVOK2RMpNog1TwlpOrapHf3trd\/bVj8rzba9mt2eM\/wADGJ13LnnnNR2vg3R9P8IX2i2mnCPT7oP5sKXD5beAH+fO7JAHftRRVOKWqJi2dNp9pFY6ZDaQRtFDDGqRqW3YUDAGTyavUUU47FH\/2Q==';<br \/>\n    var toosmall=eval('' + ('data:image\/gif;base64,R0lGODlhAQABAIAAAP7\/\/wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==').length);<br \/>\n    toosmall=100;<br \/>\n    x = this;<br \/>\n    ttl = x.title;<br \/>\n    if (((x.readyState == 4) && (x.status == 200 || x.status == 403 || x.status == 404))) {<br \/>\n     console.log('rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length + ' and imgurl=' + imgurl);<br \/>\n     for (var iik=0; iik&lt;tothers.length; iik++) {<br \/>\n        if (tothers[iik].indexOf(ttl + '#') == 0) {<br \/>\n         if (x.response.trim().indexOf('data:') != 0) {<br \/>\n         tothers[iik]='';<br \/>\n         } else {<br \/>\n         sfx='#' + tothers[iik].split('#')[1]; tothers[iik]=x.response + sfx;<br \/>\n         }<br \/>\n        }<br \/>\n     }<br \/>\n     lastok=defdata;<br \/>\n     if (document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value.indexOf('data:') == 0 && eval('' + document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value.length) &gt; toosmall) {<br \/>\n       lastok=document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value;<br \/>\n     }<br \/>\n     while (document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow'))) {<br \/>\n       if (document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value.indexOf(ttl) == 0) {<br \/>\n         if (eval('' + x.response.trim().length) &lt;= toosmall) {<br \/>\n     console.log('1 rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length);<br \/>\n         document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value=defdata;<br \/>\n         } else if (x.response.trim().indexOf('data:') != 0 && lastok == '') {<br \/>\n         \/\/alert('Why ' + sid);<br \/>\n     console.log('2 rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length);<br \/>\n         document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value=defdata;<br \/>\n         } else if (x.response.trim().indexOf('data:') != 0 && lastok != '') {<br \/>\n     console.log('3 rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length);<br \/>\n         document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value=lastok;<br \/>\n         } else {<br \/>\n     console.log('4 rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length);<br \/>\n         document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value=x.response;<br \/>\n         lastok=x.response;<br \/>\n         }<br \/>\n       } else if (document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value.indexOf('data:') == 0 && eval('' + document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value.length) &gt; toosmall) {<br \/>\n     console.log('0 rs=' + x.readyState + ' status=' + x.status + ' Ttl=' + ttl + ' and response length=' + x.response.length);<br \/>\n         lastok=document.getElementById(('slideshow' + sid).replace(\/^slideshow1$\/g,'slideshow')).value;<br \/>\n       }<br \/>\n       sid++;<br \/>\n     }<br \/>\n    }<br \/>\n   };<br \/>\n   imos[eval(-1 + imos.length)].open('get', '\/PHP\/fgc\/index.php?askimg=' + imgurl, true);<br \/>\n   console.log('imgurl=' + imgurl);<br \/>\n   imos[eval(-1 + imos.length)].send(null);<br \/>\n  } else {<br \/>\n  imos.push(new Image());<br \/>\n  imos[eval(-1 + imos.length)].title=imgurl;<br \/>\n<br \/> <br \/>\n  imos[eval(-1 + imos.length)].onerror = function(event) {<br \/>\n     var ttl=event.target.title;<br \/>\n     alert('error with ' + ttl);<br \/>\n     for (var iik=0; iik&lt;tothers.length; iik++) {<br \/>\n        if (tothers[iik].indexOf(ttl + '#') == 0) { tothers[iik]='';  }<br \/>\n     }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  imos[eval(-1 + imos.length)].onload = function(event) {<br \/>\n     var sfx='';<br \/>\n     var myc=document.getElementById('mycanvas');<br \/>\n     var mycontx=myc.getContext('2d');<br \/>\n     mycontx.drawImage(event.target,0,0);<br \/>\n     var ttl=event.target.title;<br \/>\n     for (var iik=0; iik&lt;tothers.length; iik++) {<br \/>\n        if (tothers[iik].indexOf(ttl + '#') == 0) { sfx='#' + tothers[iik].split('#')[1]; tothers[iik]=myc.toDataURL('image\/png') + sfx;  }<br \/>\n     }<br \/>\n     alert('no error with ' + event.target.title);<br \/>\n  }<br \/>\n<br \/> <br \/>\n  imos[eval(-1 + imos.length)].src=imgurl;<br \/>\n  }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; showing some onreadystatechanged percolation of used defined <a target=_blank title='XMLHttpRequest information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/XMLHttpRequest'>XMLHttpRequest<\/a> object data members coming into play, 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><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-animated-gif-svg-slide-tutorial\/'>New Animated GIF SVG 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='#d59306' onclick='var dv=document.getElementById(\"d59306\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59306' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to yesterday&#8217;s Animated GIF SVG Slide Tutorial &#8230; SVG vector image extraction from HTML input &#8230; today we want to add in &#8230; an additional + suffix will look for other HTML img element data in the user defined &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-html-image-slide-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":[2,12,14,37],"tags":[83,2829,1654,297,354,1605,2618,4329,576,590,4327,1658,2686,652,2732,860,932,2042,980,997,3457,1776,1149,1161,1226,1319,1345,1366,4328,1418,4326],"class_list":["post-59306","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-btoa","tag-data-uri","tag-data-url","tag-dom","tag-encodeuricomponent","tag-extract","tag-extraction","tag-html","tag-image","tag-imagepng","tag-imagemagick","tag-inkscape","tag-javascript","tag-mimetype","tag-onblur","tag-php","tag-png","tag-presentation","tag-programming","tag-qr-code","tag-screenshot","tag-slide","tag-snapshot","tag-svg","tag-tutorial","tag-url","tag-vector","tag-vector-graphics","tag-webpage","tag-webpage-snapshot"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59306"}],"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=59306"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59306\/revisions"}],"predecessor-version":[{"id":59311,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59306\/revisions\/59311"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}