{"id":60206,"date":"2023-07-23T03:01:31","date_gmt":"2023-07-22T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60206"},"modified":"2023-07-22T17:51:08","modified_gmt":"2023-07-22T07:51:08","slug":"animated-gif-duration-calculation-filter-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-duration-calculation-filter-tutorial\/","title":{"rendered":"Animated GIF Duration Calculation Filter Tutorial"},"content":{"rendered":"
\"Animated<\/a>

Animated GIF Duration Calculation Filter Tutorial<\/p><\/div>\n

Can a “proof of concept” arrangement last two blog postings? If there’s more you want to prove, ahead of committing to the final product that might hone in on the specificity of the idea, we’d say it’s possible, yes. And so, continuing on from the recent Animated GIF Duration Calculation Primer Tutorial<\/a> we tweak its PHP hosting “proof of concept” parent web application to try out our second point we’re out to prove …<\/p>\n

\nWe want to prove that CSS filter<\/a> works for animated GIFs as well as it appears to work with other image types of elements.\n<\/p><\/blockquote>\n

Conservative worry, we grant you, but we did want to make sure this all worked, and happily, it was all fine …<\/p>\n


\n var ingif='', ingifstyle='filter: none;', ingifint=0, ingifchosen=false;
\n
\nfunction prefetch(whatgifmaybe) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.
\nif ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1) {
\ningif=whatgifmaybe;
\ndocument.body.style.cursor='progress';
\nfetch(whatgifmaybe)
\n .then(res => res.arrayBuffer())
\n .then(ab => isGifAnimated(new Uint8Array(ab)))
\n .then(console.log);
\n}
\n}
\n
\nfunction clooktv(intv) {
\n var finds=[];
\n document.getElementById('imgag').title=intv;
\n if (ingifchosen) {
\n finds=document.getElementById('simgag').outerHTML.split('>' + intv + '<\/option>');
\n if (eval('' + finds.length) > 1) {
\n document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '<\/option>', ' selected>' + ingifstyle + '<\/option>');
\n }
\n }
\n document.body.innerHTML+='<style> #imgag { ' + intv + ' } <\/style>';
\n return intv;
\n}
\n
\nfunction changelook() {
\n var finds=[];
\n if (ingifint > 0) {
\n setTimeout(changelook, ingifint);
\n if (ingifchosen) {
\n ingifchosen=false;
\n } else {
\n finds=document.getElementById('simgag').outerHTML.split('>' + ingifstyle + '<\/option>');
\n if (eval('' + finds.length) > 1) {
\n if (finds[1].indexOf('<\/select>') == 0) {
\n ingifstyle='filter: none;';
\n document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '<\/option>', ' selected>' + ingifstyle + '<\/option>');
\n } else {
\n ingifstyle=finds[1].split('>')[1].split('<')[0];
\n document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '<\/option>', ' selected>' + ingifstyle + '<\/option>');
\n }
\n document.getElementById('simgag').value=clooktv(ingifstyle);
\n }
\n }
\n }
\n}
\n
\n\/** @param {Uint8Array} uint8 *\/
\nfunction isGifAnimated (uint8) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-duration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,duration%20of%20a%20GIF%20image.
\n let duration = 0;
\n for (let i = 0, len = uint8.length; i < len; i++) {
\n if (uint8[i] == 0x21
\n && uint8[i + 1] == 0xF9
\n && uint8[i + 2] == 0x04
\n && uint8[i + 7] == 0x00)
\n {
\n const delay = (uint8[i + 5] << 8) | (uint8[i + 4] & 0xFF);
\n duration += delay < 2 ? 10 : delay;
\n }
\n }
\n \/\/alert('' + eval(duration \/ 100));
\n if (eval(duration \/ 100) > 0.11) {
\n var damore='';
\n if (document.getElementById('aside')) {
\n if (document.getElementById('aside').outerHTML.toLowerCase().indexOf('<div') == 0) {
\n damore=' showing <select onchange=\\\"ingifchosen=true; ingifstyle=clooktv(this.value);\\\" id=simgag size=13><option value=\\\"filter: none;\\\" selected>filter: none;<\/option><option value=\\\"filter: blur(5px);\\\">filter: blur(5px);<\/option><option value=\\\"filter: brightness(0.4);\\\">filter: brightness(0.4);<\/option><option value=\\\"filter: contrast(200%);\\\">filter: contrast(200%);<\/option><option value=\\\"filter: drop-shadow(16px 16px 20px blue);\\\">filter: drop-shadow(16px 16px 20px blue);<\/option><option value=\\\"filter: grayscale(50%);\\\">filter: grayscale(50%);<\/option><option value=\\\"filter: hue-rotate(90deg);\\\">filter: hue-rotate(90deg);<\/option><option value=\\\"filter: invert(75%);\\\">filter: invert(75%);<\/option><option value=\\\"filter: opacity(25%);\\\">filter: opacity(25%);<\/option><option value=\\\"filter: saturate(30%);\\\">filter: saturate(30%);<\/option><option value=\\\"filter: sepia(60%);\\\">filter: sepia(60%);<\/option><option value=\\\"filter: contrast(175%) brightness(33%);\\\">filter: contrast(175%) brightness(33%);<\/option><option value=\\\"filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);\\\">filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);<\/option><\/select><br><br><img onload=\\\"if (ingifint == 0) { ingifint=' + eval(duration * 10) + '; setTimeout(changelook, eval(800 + ingifint)); }\\\" title=\\\"filter: none;\\\" src=\\\"' + ingif + '\\\" id=imgag><\/img><br>';
\n document.getElementById('aside').innerHTML='<?php echo $image; ?> Animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration \/ 100) + ' seconds ' + damore;
\n \/\/ingifint=eval(duration * 10);
\n \/\/setTimeout(changelook, eval(duration * 10));
\n document.getElementById('aside').scrollIntoView();
\n } else {
\n document.getElementById('aside').innerHTML=' (<?php echo $image; ?> animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration \/ 100) + ' seconds)' + damore;
\n }
\n }
\n }
\n document.body.style.cursor='pointer';
\n return duration \/ 100; \/\/ if 0.1 is not an animated GIF
\n}
\n<\/code><\/p>\n

And so, especially because GIF images cannot be useful for exif information, it helps us isolate our “proof of concept” feel to today’s changed<\/a> read_exif_off_image_rotate.php<\/a> PHP image exif reporter web application<\/a> which we can supply an argument to such as the Katoomba Street Art Walk<\/a> inspired one<\/a> also shown below …<\/p>\n