<html>
<head>
<title>CSS Filter Image Display - RJM Programming - July, 2023</title>
<style>
:not(iframe) {
text-align:top;
vertical-align:top;
}
#simgag {
background-color: rgb(255,255,237);
}
#image {
background-color: #fff3f0;
}
</style>
<script type=text/javascript>
var ingif='', ingifstyle='filter: none;', ingifint=0, ingifchosen=false;
var isag=-1, isagname='';
if (document.URL.indexOf('img=') != -1) {
setTimeout(function(){
document.getElementById('image').value=decodeURIComponent(document.URL.split('img=')[1].split('&')[0].split('#')[0]);
document.getElementById('aside').style.display='block';
document.getElementById('aside').innerHTML+='<img onload="if (ingifint == 0) { ingifint=0; setTimeout(changelook, eval(800 + Math.abs(ingifint))); }" title="filter: none;" src="' + decodeURIComponent(document.URL.split('img=')[1].split('&')[0].split('#')[0]) + '" id="imgag">';
}, 2000);
}
if (document.URL.indexOf('filter=') != -1) {
setTimeout(function(){
document.getElementById('simgag').style.display='block';
document.body.innerHTML+='<style> #imgag { ' + decodeURIComponent(document.URL.split('filter=')[1].split('&')[0].split('#')[0]) + ' } </style>';
document.getElementById('optcx').innerText=decodeURIComponent(document.URL.split('filter=')[1].split('&')[0].split('#')[0]);
document.getElementById('optcx').value=decodeURIComponent(document.URL.split('filter=')[1].split('&')[0].split('#')[0]);
document.getElementById('imgag').title=document.getElementById('optcx').value;
document.getElementById('simgag').value=document.getElementById('optcx').value;
if (document.URL.indexOf('img=') != -1) {
document.getElementById('image').value=decodeURIComponent(document.URL.split('img=')[1].split('&')[0].split('#')[0]);
}
}, 2500);
}
if (document.URL.indexOf('only=') != -1) {
setTimeout(function(){
document.getElementsByTagName('h1')[0].style.display='none';
document.getElementsByTagName('h3')[0].style.display='none';
document.getElementsByTagName('select')[0].style.display='none';
document.getElementsByTagName('form')[0].style.display='none';
document.getElementsByTagName('iframe')[0].style.display='none';
}, 2800);
}
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.trim() != '' || (whatgifmaybe.toLowerCase().trim().split('#')[0] + '?').indexOf('.gif?') != -1 || whatgifmaybe.indexOf('data:image/') == 0) {
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=[];
if (intv.indexOf('filter:') == 0) {
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>';
} else {
setTimeout(callresell, 1000);
}
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];
if (ingifstyle.indexOf('filter:') != 0) { ingifstyle='filter: none;'; }
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 || document.URL.indexOf('image_css_filter_display.htm') != -1) {
//alert('' + duration);
var damore='', wpthere=false;
if (document.getElementById('aside')) {
if (document.getElementById('aside').outerHTML.toLowerCase().indexOf('<div') == 0) {
damore=' showing <select data-oncontextmenu=resell(event,this); data-ontouchmove=resell(event,this); onchange=\"ingifchosen=true; ingifstyle=clooktv(this.value);\" id=simgag size=14><option contenteditable=true value=\"filter: none;\" selected>filter: none;</option><option contenteditable=true value=\"filter: blur(5px);\">filter: blur(5px);</option><option contenteditable=true value=\"filter: brightness(0.4);\">filter: brightness(0.4);</option><option contenteditable=true value=\"filter: contrast(200%);\">filter: contrast(200%);</option><option contenteditable=true value=\"filter: drop-shadow(16px 16px 20px blue);\">filter: drop-shadow(16px 16px 20px blue);</option><option contenteditable=true value=\"filter: grayscale(50%);\">filter: grayscale(50%);</option><option contenteditable=true value=\"filter: hue-rotate(90deg);\">filter: hue-rotate(90deg);</option><option contenteditable=true value=\"filter: invert(75%);\">filter: invert(75%);</option><option contenteditable=true value=\"filter: opacity(25%);\">filter: opacity(25%);</option><option contenteditable=true value=\"filter: saturate(30%);\">filter: saturate(30%);</option><option contenteditable=true value=\"filter: sepia(60%);\">filter: sepia(60%);</option><option contenteditable=true value=\"filter: contrast(175%) brightness(33%);\">filter: contrast(175%) brightness(33%);</option><option contenteditable=true 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><option contenteditable=true value=\"Change\">Change</option></select><br><br><img onload=\"if (ingifint == 0) { ingifint=' + eval(duration * 10) + '; setTimeout(changelook, eval(800 + Math.abs(ingifint))); }\" title=\"filter: none;\" src=\"' + ingif + '\" id=imgag></img><br>';
//ingifint=eval(duration * 10);
//setTimeout(changelook, eval(duration * 10));
if (window.parent) {
if (window.self !== window.parent && parent.document.getElementById('aside')) {
wpthere=true;
parent.document.getElementById('aside').style.display='block';
if (eval(duration / 100) > 0.11) {
parent.document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
} else {
parent.document.getElementById('aside').innerHTML='Image ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
}
parent.document.getElementById('aside').scrollIntoView();
parent.document.getElementById('image').style.opacity='0.5';
parent.document.getElementById('image').style.width='5%';
parent.document.getElementById('isub').style.opacity='0.5';
} else {
document.getElementById('aside').style.display='block';
if (eval(duration / 100) > 0.11) {
document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
} else {
document.getElementById('aside').innerHTML='Image ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
}
}
} else {
document.getElementById('aside').style.display='block';
if (eval(duration / 100) > 0.11) {
document.getElementById('aside').innerHTML='Animated GIF ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
} else {
document.getElementById('aside').innerHTML='Image ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds ' + damore;
}
}
if (!wpthere) { document.getElementById('aside').scrollIntoView(); }
} else if (eval(duration / 100) > 0.11) {
document.getElementById('aside').innerHTML=' ( image ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds)' + damore;
} else {
document.getElementById('aside').innerHTML=' ( animated GIF ' + isagname + ' duration is ' + eval(duration / 100) + ' seconds)' + damore;
}
}
//} else {
//alert('duration=' + duration);
}
document.body.style.cursor='pointer';
return duration / 100; // if 0.1 is not an animated GIF
}
function callresell() {
var oselo=document.getElementById('simgag');
var svalis='';
var sc=';';
var changefound=false;
if (document.getElementById('imgag')) {
oselo.value=document.getElementById('imgag').title;
}
var reselit=prompt('Please change the semicolon separated options list. Optionally hash # separate a CSS filter refresh interval in seconds (currently ' + eval(Math.abs(ingifint) / 1000.000) + ' seconds).', oselo.innerText);
if (reselit != null) {
if (reselit.indexOf('#') != -1) {
if (ingifint < 0) {
ingifint=Math.round(eval(-1000.0 * eval('' + reselit.split('#')[1].split(';')[0])));
} else {
ingifint=Math.round(eval(1000.0 * eval('' + reselit.split('#')[1].split(';')[0])));
}
reselit=reselit.replace('#' + reselit.split('#')[1].split(';')[0], '');
}
}
if (reselit == null) {
return '';
} else if (reselit != oselo.innerText) {
var sih=oselo.innerHTML;
var vsl=reselit.split(';');
var shi=sih.split('</option>');
var ssize='' + oselo.size;
var vssize=0;
var newih='';
for (var ihi=0; ihi<vsl.length; ihi++) {
if (vsl[ihi].trim() != '') {
if (vsl[ihi].trim() == 'Change') { changefound=true; sc=''; } else { sc=';'; }
if (eval('' + shi.length) > ihi) {
if (eval('' + (shi[ihi] + '</option>').split(vsl[ihi].trim() + sc).length) == 3) {
newih+=shi[ihi] + '</option>';
vssize++;
} else {
svalis=shi[ihi].split(' value="')[1].split('"')[0];
newih+=shi[ihi].split('>')[0].replace(svalis, vsl[ihi].trim() + sc) + '>' + vsl[ihi].trim() + sc + '</option>';
vssize++;
}
} else if (vsl[ihi].trim().indexOf('filter:') == 0) {
newih+='<option contenteditable=true value="' + vsl[ihi].trim() + sc + '">' + vsl[ihi].trim() + sc + '</option>';
vssize++;
} else {
newih+='<option contenteditable=true value="' + vsl[ihi].trim() + '">' + vsl[ihi].trim() + '' + '</option>';
vssize++;
}
}
}
if (!changefound) {
newih+='<option contenteditable=true value="Change">Change</option>';
vssize++;
}
oselo.innerHTML=newih;
if (eval('' + ssize) != eval('' + vssize)) {
oselo.size='' + eval('' + vssize);
}
}
return '';
}
function resell(evt,oselo) {
evt.preventDefault();
evt.stopPropagation();
//var reselit=prompt('Please change the comma separated options list', oselo.innerText);
}
function ob(tv) {
prefetch(tv);
}
</script>
</head>
<body>
<h1>CSS Filter Image Display</h1>
<h3>RJM Programming - July, 2023</h3>
<form target="_self" id="myform" action="./read_exif_off_image_rotate.php" method="POST"> <span id="spag" class="spag"><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:173px;height:218px;margin-top:-204px;" src="/HTMLCSS/client_browsing.htm?d=312160562686&wording=Allimages%20images%2E%20"></iframe></span> Image URL: <input name="image" id="image" onblur=" ob(this.value); " type="text" value="" style="width: 40%; display: inline-block; opacity: 0.5;"> <input style="display: none; opacity: 0.5;" id="isub" onclick=" " type="button" value="Image Display"></form>
<div id=aside style=display:none;>
<select data-oncontextmenu="resell(event,this);" data-ontouchmove="resell(event,this);" onchange="ingifchosen=true; ingifstyle=clooktv(this.value);" id="simgag" size="14"><option contenteditable="true" value="filter: none;" data-selected="">filter: none;</option><option contenteditable="true" value="filter: blur(5px);" data-selected="">filter: blur(5px);</option><option contenteditable="true" value="filter: brightness(0.4);">filter: brightness(0.4);</option><option contenteditable="true" value="filter: contrast(200%);">filter: contrast(200%);</option><option contenteditable="true" value="filter: drop-shadow(16px 16px 20px blue);">filter: drop-shadow(16px 16px 20px blue);</option><option contenteditable="true" value="filter: grayscale(50%);">filter: grayscale(50%);</option><option contenteditable="true" value="filter: hue-rotate(90deg);" data-selected="">filter: hue-rotate(90deg);</option><option contenteditable="true" value="filter: invert(75%);" data-selected="">filter: invert(75%);</option><option contenteditable="true" value="filter: opacity(25%);" selected="">filter: opacity(25%);</option><option contenteditable="true" value="filter: saturate(30%);">filter: saturate(30%);</option><option contenteditable="true" value="filter: sepia(60%);">filter: sepia(60%);</option><option id=optcx contenteditable="true" value="filter: contrast(175%) brightness(33%);">filter: contrast(175%) brightness(33%);</option><option contenteditable="true" 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><option contenteditable="true" value="Change">Change</option></select>
</div>
</body>
</html>