<html>
<head>
<title>Image Filters off Camera - RJM Programming - May, 2024 ... thanks to https://stackoverflow.com/questions/30408939/how-to-save-image-from-canvas-with-css-filters</title>
<script type='text/javascript'>
var imurl=location.search.split('image=')[1] ? location.search.split('image=')[1].split('&')[0] : (document.URL.indexOf('localhost:8888/') != -1 ? '/maple.jpg' : '/HTMLCSS/maple.jpg');
var kcmap=["filter: blur(5px);","filter: brightness(0.4);","filter: contrast(200%);","filter: drop-shadow(16px 16px 20px blue);","filter: grayscale(50%);","filter: hue-rotate(90deg);","filter: invert(75%);","filter: opacity(25%);","filter: saturate(30%);","filter: sepia(60%);","filter: none;","Your Own CSS property"];
var lastim=null, lastca=null, lastcac=null, defem='', defes='';
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
function canvasize(jnr) {
lastim=new Image();
lastim.onload=function(event){
var filt=document.getElementById('selopt').innerText;
if (document.getElementById('animg').outerHTML.indexOf(' style="') != -1) {
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
lastca=document.getElementById('mycanvas');
lastcac=lastca.getContext('2d');
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(lastim, 0, 0);
lastim=document.getElementById('animg');
};
lastim.src=jnr;
return jnr;
}
function fillsel(inr) {
if (decodeURIComponent(('' + location.hash)).indexOf('image=') != -1) {
inr=(decodeURIComponent(('' + location.hash)).split('image=')[1]);
if (inr.indexOf(' src="') != -1) {
var wasdu=inr.split(' src="')[1].split('"')[0];
if (wasdu.indexOf(' ') != -1) { inr=inr.replace(wasdu, wasdu.replace(/\ /g,'+')); }
}
document.getElementById('danimg').innerHTML=inr;
if (inr.indexOf(' style="') != -1) {
document.getElementById('selopt').innerText=inr.split(' style="')[1].split('"')[0].trim();
}
}
var ihis=document.getElementById('selfil').innerHTML, ir=0;
for (ir=0; ir<kcmap.length; ir++) {
ihis+='<option value="' + kcmap[ir] + '">' + kcmap[ir] + '</option>';
}
for (ir=0; ir<kcmap.length; ir++) {
ihis+='<option value=" + ' + kcmap[ir] + '"> + ' + kcmap[ir] + '</option>';
}
document.getElementById('selfil').innerHTML=ihis;
if (decodeURIComponent(('' + location.hash)).indexOf('image=') != -1) {
return canvasize(document.getElementById('animg').src);
}
return canvasize(inr);
}
function changeim(oinp) {
if (oinp.value.trim() != '') {
document.getElementById('animg').src=oinp.value;
}
}
function mayberesultalread() {
mayberesultalready(document.getElementById('result').innerHTML);
}
function mayberesultalready(intv) {
if (document.getElementById('result') && intv.indexOf('data:') == 0) {
document.getElementById('animg').src=intv;
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19878654) + '&wording=Allimages%20images%2E%20';
}
}
function filterit(osel) {
var propis='', uprops=[], sofarfil='', uattis='', iua=1, yourv='', yourt='', ais='';
if ((osel.value + ' ').substring(0,3) == ' + ') {
if (osel.value.indexOf('Your Own CSS property') > 0) {
yourv=prompt('Please enter your own CSS property syntax eg. opacity: 0.6; ', '');
if (yourv == null) { yourv=''; }
if (yourv.indexOf(':') != -1) {
if (5 == 5) {
if (document.getElementById('danimg').innerHTML.indexOf(' style="') != -1) {
document.getElementById('danimg').innerHTML=document.getElementById('danimg').innerHTML.replace(' style="', ' style="' + yourv);
} else {
ais=document.getElementById('animg').src;
document.getElementById('danimg').innerHTML="<img style=\"" + yourv + "\" id=animg src=\"" + ais + "\"></img>";
}
} else {
osel.innerHTML+='<option value=" + ' + yourv.split(';')[0] + ';">' + " + " + yourv.split(';')[0] + ';</option>';
osel.value=' + ' + yourv.split(';')[0] + ';';
}
}
} else {
if (document.getElementById('animg').outerHTML.indexOf('filter:') != -1) {
sofarfil=document.getElementById('animg').outerHTML.split('filter:')[1].split(';')[0];
}
if (osel.value.indexOf('filter:') != -1) {
document.getElementById('animg').style.filter=sofarfil + ' ' + osel.value.split('filter:')[1].split(';')[0];
document.getElementById('selopt').innerText='filter: ' + sofarfil + ' ' + osel.value.split('filter:')[1].split(';')[0] + ';';
osel.value='';
document.getElementById('animg').onload=function(event){
var filt=document.getElementById('selopt').innerText;
//alert(1);
if (document.getElementById('animg').outerHTML.indexOf(' style="') != -1) {
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
//alert(11);
lastca=document.getElementById('mycanvas');
lastcac=lastca.getContext('2d');
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(event.target, 0, 0);
//alert(111);
lastim=document.getElementById('animg');
//alert(1111);
};
document.getElementById('animg').src=document.getElementById('animg').src;
}
}
} else if ((osel.value + ' ').substring(0,3) == 'fil') {
if (document.getElementById('animg').outerHTML.indexOf('filter:') != -1) {
sofarfil=document.getElementById('animg').outerHTML.split('filter:')[1].split(';')[0];
}
if (osel.value.indexOf('filter:') != -1) {
document.getElementById('animg').style.filter=osel.value.split('filter:')[1].split(';')[0];
document.getElementById('selopt').innerText='filter: ' + osel.value.split('filter:')[1].split(';')[0] + ';';
osel.value='';
document.getElementById('animg').onload=function(event){
var filt=document.getElementById('selopt').innerText;
if (document.getElementById('animg').outerHTML.indexOf(' style="') != -1) {
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
lastca=document.getElementById('mycanvas');
lastcac=lastca.getContext('2d');
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(event.target, 0, 0);
lastim=document.getElementById('animg');
};
document.getElementById('animg').src=document.getElementById('animg').src;
}
} else if (osel.value.trim().indexOf(':') != -1) {
propis=osel.value.trim().split(':')[0];
uattis=propis;
uprops=propis.split('_');
if (eval('' + uprops.length) > 1) {
for (iua=1; iua<uprops.length; iua++) {
uattis=uattis.replace('_' + uprops[iua].substring(0,1).toLowerCase(), '' + uprops[iua].substring(0,1).toUpperCase());
}
if (1 == 1) {
ais=document.getElementById('animg').src;
document.getElementById('danimg').innerHTML="<img style=\"" + newstyling + "\" id=animg src=\"" + ais + "\"></img>";
} else {
eval("document.getElementById('animg').style." + uattis + '="' + osel.value.trim().split(':')[1].split(';')[0] + '"');
}
document.getElementById('selopt').innerText=propis + ': ' + osel.value.trim().split(';')[0] + ';';
osel.value='';
document.getElementById('animg').onload=function(event){
var filt=document.getElementById('selopt').innerText;
if (document.getElementById('animg').outerHTML.indexOf(' style="') != -1) {
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
} else {
document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details>';
}
lastca=document.getElementById('mycanvas');
lastcac=lastca.getContext('2d');
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(event.target, 0, 0);
lastim=document.getElementById('animg');
};
document.getElementById('animg').src=document.getElementById('animg').src;
}
} else if (osel.value.indexOf('Your Own CSS property') > 0) {
yourv=prompt('Please enter your own CSS property syntax eg. opacity: 0.6; ', '');
if (yourv == null) { yourv=''; }
if (yourv.indexOf(':') != -1) {
if (document.getElementById('danimg').innerHTML.indexOf(' style="') != -1) {
document.getElementById('danimg').innerHTML=document.getElementById('danimg').innerHTML.replace(' style="', ' style="' + yourv);
} else {
ais=document.getElementById('animg').src;
document.getElementById('danimg').innerHTML="<img style=\"" + yourv + "\" id=animg src=\"" + ais + "\"></img>";
}
//}
} else {
osel.innerHTML+='<option value=" + ' + yourv.split(';')[0] + ';">' + " + " + yourv.split(';')[0] + ';</option>';
osel.value=' + ' + yourv.split(';')[0] + ';';
//}
}
} else if (osel.value == 'Your Own CSS property') {
yourv=prompt('Please enter your own CSS property syntax eg. opacity: 0.6; ', '');
if (yourv == null) { yourv=''; }
if (yourv.indexOf(':') != -1) {
osel.innerHTML+='<option value="' + yourv.split(';')[0] + ';">' + yourv.split(';')[0] + ';</option>';
osel.value='' + yourv.split(';')[0] + ';';
}
}
}
function jifopen(iois) {
}
function notwotwo() {
}
function doemail() {
var emailee=prompt('Please enter email address to share with.', defem);
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
defem=emailee;
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Image%20Filters' + encodeURIComponent(' ... ' + document.getElementById('selopt').innerText) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML));
document.getElementById('aemail').click();
}
}
function dosms() {
var emailee=prompt('Please enter SMS number to share with.', defes);
if (emailee == null) { emailee=''; }
if (emailee != '' && emailee.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
defes=emailee;
document.getElementById('asms').href='sms:' + emailee.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML));
document.getElementById('asms').click();
}
}
function embellish() {
var newstyling=prompt('Optionally change styling.', document.getElementById('selopt').innerText);
if (newstyling == null) { newstyling=''; }
if (newstyling != document.getElementById('selopt').innerText && newstyling.indexOf(':') != -1) {
document.getElementById('selopt').innerText=newstyling;
ais=document.getElementById('animg').src;
document.getElementById('danimg').innerHTML="<img style=\"" + newstyling + "\" id=animg src=\"" + ais + "\"></img>";
}
}
setInterval(mayberesultalread, 5000);
</script>
</head>
<body onload="document.getElementById('animg').src=fillsel(imurl); if (isSafari) { document.getElementById('cbi').style.height='220px'; }">
<h1>Image <a id=afilters onclick=embellish(); style='text-decoration:underline;cursor:pointer;' title='Embellish styling ...'>Filters</a> <select onchange=filterit(this); id=selfil><option data-contenteditable=true id=selopt value=''></option></select> off Camera <input onblur=changeim(this); type=url value='' placeholder="Image URL ... or ..."></input> <iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe></h1>
<h3>RJM Programming - May, 2024 <button style=display:inline-block; title="Share via Email" id=semail onclick="doemail();">📧</button> <button style=display:inline-block; title="Share via SMS" id=ssms onclick=dosms();>📟</button></h3>
<div id=browsefor></div>
<div id=danimg><img id=animg src=''></img></div>
<div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>
<div id=dcanvas></div>
<a href='mailto:?subject=Image%20Filters&body=' style=display:none; id=aemail>Email</a>
<a href='sms:&body=' style=display:none; id=asms>SMS</a>
</body>
</html>