<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='', newcanvas=null, lesserinurl='', greaterinurl='';
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
var ourdcanvas='browsefor', ocm='', mediatype='img';
ocm=' onclick=" mediatype=' + "'canvas'" + '; var chc=prompt(' + "'Optionally enter email (address) or SMS (number) to share canvas version as required.',''" + '); if (chc != null) { if (chc.toLowerCase() == ' + "'sms'" + ') { dosms(); } else if (chc.toLowerCase() == ' + "'sms'" + ') { doemail(); } else { assess(chc); } } mediatype=' + "'img'" + '; " ';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
ourdcanvas='browsefor'; //'d' + 'canvas';
ocm=' onclick=" mediatype=' + "'canvas'" + '; var chc=prompt(' + "'Optionally enter email (address) or SMS (number) to share canvas version as required.',''" + '); if (chc != null) { if (chc.toLowerCase() == ' + "'sms'" + ') { dosms(); } else if (chc.toLowerCase() == ' + "'sms'" + ') { doemail(); } else { assess(chc); } } mediatype=' + "'img'" + '; " ';
}
function canvasize(jnr) {
lastim=new Image();
lastim.onload=function(event){
var filt=document.getElementById('selopt').innerText;
//lastim=document.getElementById('animg');
if (jnr.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.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(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '>/canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //lastcac.drawImage(lastim, 0, 0);
lastim=document.getElementById('animg');
};
lastim.src=jnr;
return jnr;
}
function fillsel(inr) {
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// document.getElementById('mymobilecanvas').style.display='block';
//}
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').onload=function(event){
var filt=document.getElementById('selopt').innerText;
//alert(1);
lastim=document.getElementById('animg');
if (lastim.src.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ourdcanvas == 'browsefor') {
document.getElementById('browsefor').innerHTML='';
}
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.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(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
//alert(11);
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //lastcac.drawImage(event.target, 0, 0);
//alert(111);
lastim=document.getElementById('animg');
//alert(1111);
};
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);
lastim=document.getElementById('animg');
if (lastim.src.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ourdcanvas == 'browsefor') {
document.getElementById('browsefor').innerHTML='';
}
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.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(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
//alert(11);
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //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;
lastim=document.getElementById('animg');
if (lastim.src.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ourdcanvas == 'browsefor') {
document.getElementById('browsefor').innerHTML='';
}
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.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(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //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;
lastim=document.getElementById('animg');
if (lastim.src.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ourdcanvas == 'browsefor') {
document.getElementById('browsefor').innerHTML='';
}
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.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();
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(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //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 assess(emailee) {
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
defem=emailee;
if (mediatype == 'canvas') {
if (newcanvas && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Canvas%20Image' + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + newcanvas.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
} else {
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Canvas%20Image' + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + lastca.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
}
} else {
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();
} else 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;
if (mediatype == 'canvas') {
if (newcanvas && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('asms').href='sms:' + emailee.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + newcanvas.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
} else {
document.getElementById('asms').href='sms:' + emailee.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + lastca.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
}
} else {
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 doemail() {
var emailee=prompt('Please enter email address to share with.', defem);
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
defem=emailee;
if (mediatype == 'canvas') {
if (newcanvas && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Canvas%20Image' + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + newcanvas.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
} else {
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Canvas%20Image' + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + lastca.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
}
} else {
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;
if (mediatype == 'canvas') {
if (newcanvas && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('asms').href='sms:' + emailee.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + newcanvas.toDataURL('image/jpeg', 1.0) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
} else {
document.getElementById('asms').href='sms:' + emailee.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML.split(' src="')[0] + ' src="' + lastca.toDataURL('image/jpeg', 0.1) + document.getElementById('animg').outerHTML.split(document.getElementById('animg').outerHTML.split(' src="')[1].split('"')[0])[1] ));
}
} else {
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 filt='';
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>";
if (newstyling.indexOf('filter:') != -1) {
filt=newstyling.split('filter:')[1].split(';')[0];
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //lastcac.drawImage(lastim, 0, 0);
}
}
}
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>
<table><tr><td style=vertical-align:top; title='Image element'>
<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>
</td><td style=vertical-align:top; title='Canvas element'>
<div id=dcanvas></div>
</td></tr></table>
<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>
<canvas id=mymobilecanvas style=display:none;></canvas>
</body>
</html>