Animated GIF Duration Calculation Filter Tutorial

Animated GIF Duration Calculation Filter Tutorial

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 we tweak its PHP hosting “proof of concept” parent web application to try out our second point we’re out to prove …

We want to prove that CSS filter works for animated GIFs as well as it appears to work with other image types of elements.

Conservative worry, we grant you, but we did want to make sure this all worked, and happily, it was all fine …


var ingif='', ingifstyle='filter: none;', ingifint=0, ingifchosen=false;

function 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.
if ((whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1) {
ingif=whatgifmaybe;
document.body.style.cursor='progress';
fetch(whatgifmaybe)
.then(res => res.arrayBuffer())
.then(ab => isGifAnimated(new Uint8Array(ab)))
.then(console.log);
}
}

function clooktv(intv) {
var finds=[];
document.getElementById('imgag').title=intv;
if (ingifchosen) {
finds=document.getElementById('simgag').outerHTML.split('>' + intv + '</option>');
if (eval('' + finds.length) > 1) {
document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '</option>', ' selected>' + ingifstyle + '</option>');
}
}
document.body.innerHTML+='<style> #imgag { ' + intv + ' } </style>';
return intv;
}

function changelook() {
var finds=[];
if (ingifint > 0) {
setTimeout(changelook, ingifint);
if (ingifchosen) {
ingifchosen=false;
} else {
finds=document.getElementById('simgag').outerHTML.split('>' + ingifstyle + '</option>');
if (eval('' + finds.length) > 1) {
if (finds[1].indexOf('</select>') == 0) {
ingifstyle='filter: none;';
document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '</option>', ' selected>' + ingifstyle + '</option>');
} else {
ingifstyle=finds[1].split('>')[1].split('<')[0];
document.getElementById('simgag').innerHTML=document.getElementById('simgag').innerHTML.replace(' selected',' data-selected').replace('>' + ingifstyle + '</option>', ' selected>' + ingifstyle + '</option>');
}
document.getElementById('simgag').value=clooktv(ingifstyle);
}
}
}
}

/** @param {Uint8Array} uint8 */
function 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.
let duration = 0;
for (let i = 0, len = uint8.length; i < len; i++) {
if (uint8[i] == 0x21
&& uint8[i + 1] == 0xF9
&& uint8[i + 2] == 0x04
&& uint8[i + 7] == 0x00)
{
const delay = (uint8[i + 5] << 8) | (uint8[i + 4] & 0xFF);
duration += delay < 2 ? 10 : delay;
}
}
//alert('' + eval(duration / 100));
if (eval(duration / 100) > 0.11) {
var damore='';
if (document.getElementById('aside')) {
if (document.getElementById('aside').outerHTML.toLowerCase().indexOf('<div') == 0) {
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>';
document.getElementById('aside').innerHTML='<?php echo $image; ?> Animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
//ingifint=eval(duration * 10);
//setTimeout(changelook, eval(duration * 10));
document.getElementById('aside').scrollIntoView();
} else {
document.getElementById('aside').innerHTML=' (<?php echo $image; ?> animated GIF ' + ingif.split('#')[0].split('?')[0] + ' duration is ' + eval(duration / 100) + ' seconds)' + damore;
}
}
}
document.body.style.cursor='pointer';
return duration / 100; // if 0.1 is not an animated GIF
}


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 read_exif_off_image_rotate.php PHP image exif reporter web application which we can supply an argument to such as the Katoomba Street Art Walk inspired one also shown below …

Previous relevant Animated GIF Duration Calculation Primer Tutorial is shown below.

Animated GIF Duration Calculation Primer Tutorial

We’ve got a new (mini-_?)project developing. No, it doesn’t hurt in the “you know what”! But thanks for your concern?!

It’s a project that reminds us about an adage regarding projects, that might seem pretty obvious, but is worth mentioning …

Many projects being 90% perspiration, 10% inspiration, there might be the “not sure we can do” items that should be tackled first.

That truism is all well and good, but not always possible, of course, when you have to set up the difficult environment ahead of testing this unknown. Not so, with the “unknown” of our new project …

We want to know whether we can detect an animated GIF media file playing duration, ideally in client side Javascript, and if not possible there, we would settle for a server side PHP solution.

Happily (via our duration of animated GIF using Javascript Google search), yet again, the online wooooorrrrlllldd has come to our rescue via this excellent webpage‘s Javascript ideas, so many thanks!

We slotted its thinking (and Javascript (via PHP) …

... logic), you might say in a "kludgy" way (but, for us, serving a "proof of concept" purpose), that allows us to proceed on other aims of our project that will become apparent into the near future. No, we are not totally "out of the woods" yet regarding "unknowns" but today's changed read_exif_off_image_rotate.php PHP image exif reporter web application) into the "onblur" logic of an image URL textbox HTML element, that web application talked about when we presented Gimp Guillotine Image File Browse Media Tutorial. You might try it yourself, but not sure "animated GIF and exif" mix, if you get my meaning, but if your image is an animated GIF you should be informed of its duration, in seconds, up the top of the webpage (given permissions and all, that is)?

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.