<!doctype html>
<html>
<head>
<title>Image Capture Email - RJM Programming - October, 2018 - Thanks to https://www.w3.org/TR/html-media-capture/</title>
<script type='text/javascript'>

var cdatestr='';
var atop=0;
var awidth=0;
var c=null;
var ctx=null;
var tops=[0];
var img=[];
var cfile=null;
var imgURL=[];
var kk=0;
var cimg=[];
var form=null;
var xhr=null;
var notfirstinsession=0;
var done=false;
var dhuh=null;
var dnhuh=0;
var swir='0';
var nocamera=false;

function setCookie(thisg) { // thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
var tn="";
var expireDate = new Date();
if (document.getElementById('zipname').value.indexOf(expireDate.getFullYear() + ("0" + eval(1 + expireDate.getMonth())).slice(-2) + ("0" + expireDate.getDate()).slice(-2)) != -1) {
if (document.getElementById('nocamera').checked) {
tn=document.getElementById('to').value + ',true,' + document.getElementById('zipname').value.replace(expireDate.getFullYear() + ("0" + eval(1 + expireDate.getMonth())).slice(-2) + ("0" + expireDate.getDate()).slice(-2),"yyyymmdd") + ',' + document.getElementById('swir').value + ',' + document.getElementById('subject').value;
} else {
tn=document.getElementById('to').value + ',false,' + document.getElementById('zipname').value.replace(expireDate.getFullYear() + ("0" + eval(1 + expireDate.getMonth())).slice(-2) + ("0" + expireDate.getDate()).slice(-2),"yyyymmdd") + ',' + document.getElementById('swir').value + ',' + document.getElementById('subject').value;
}
} else {
if (document.getElementById('nocamera').checked) {
tn=document.getElementById('to').value + ',true,' + document.getElementById('zipname').value + ',' + document.getElementById('swir').value + ',' + document.getElementById('subject').value;
} else {
tn=document.getElementById('to').value + ',false,' + document.getElementById('zipname').value + ',' + document.getElementById('swir').value + ',' + document.getElementById('subject').value;
}
}
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = thisg + "=" + encodeURIComponent(tn) + ";expires=" + expireDate.toGMTString();
}

function cookieVal(cName) {
if (document.cookie != '') {
var tCookie=document.cookie.split("; ");

for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split("=")[0]) {
return decodeURIComponent(tCookie[j].split("=")[1]);
}
}
}
return '';
}

function deleteAllCookies(cName) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
if (document.cookie != '') {
var tCookie=document.cookie.split("; ");

for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split("=")[0]) {
document.cookie = goodname + "=;expires=" + expireDate.toGMTString();
}
}
}
}

function bp() {
var exDate = new Date();
var exstr=exDate.getFullYear() + ("0" + eval(1 + exDate.getMonth())).slice(-2) + ("0" + exDate.getDate()).slice(-2);

var to=location.search.split('to=')[1] ? decodeURIComponent(location.search.split('to=')[1].split('&')[0]) : '';
var subject=location.search.split('subject=')[1] ? decodeURIComponent(location.search.split('subject=')[1].split('&')[0]) : '';
var zipname=location.search.split('zipname=')[1] ? decodeURIComponent(location.search.split('zipname=')[1].split('&')[0]).replace('yyyymmdd', exstr) : '';
swir=location.search.split('swir=')[1] ? location.search.split('swir=')[1].split('&')[0] : '0';
var forever=location.search.split('forever=')[1] ? true : false;
nocamera=location.search.split('nocamera=')[1] ? true : false;
var cval=cookieVal('imagecapture');

dhuh=document.body;

if (to == '' && subject == '' && zipname == '' && forever) {
deleteAllCookies('imagecapture');
} else if (cval == '') {
document.getElementById('to').value=to;
document.getElementById('subject').value=subject;
document.getElementById('zipname').value=zipname;
if (nocamera) { document.getElementById('nocamera').checked=true; }
if (forever) { setCookie('imagecapture'); }
} else {
var cs=decodeURIComponent(cval).split(',');
if (cs.length > 4) {
if (cs[0] != '') { document.getElementById('to').value=cs[0]; } else { document.getElementById('to').value=to; }
if (cs[1] == 'true') { nocamera=true; document.getElementById('nocamera').checked=nocamera; } else if (cs[1] == 'false') { nocamera=false; document.getElementById('nocamera').checked=nocamera; } else { document.getElementById('nocamera').checked=nocamera; }
if (cs[2] != '') { document.getElementById('zipname').value=cs[2].replace('yyyymmdd', exstr); } else { document.getElementById('zipname').value=zipname; }
if (cs[3] != '') { document.getElementById('swir').value=cs[3]; swir=cs[3]; } else { document.getElementById('swir').value='' + swir; }
if (cs[4] != '') { document.getElementById('subject').value=cval.replace(cs[0] + ',' + cs[1] + ',' + cs[2] + ',' + cs[3] + ',',''); } else { document.getElementById('subject').value=subject; }
} else if (cs.length > 3) {
if (cs[0] != '') { document.getElementById('to').value=cs[0]; } else { document.getElementById('to').value=to; }
if (cs[1] == 'true') { nocamera=true; document.getElementById('nocamera').checked=nocamera; } else if (cs[1] == 'false') { nocamera=false; document.getElementById('nocamera').checked=nocamera; } else { document.getElementById('nocamera').checked=nocamera; }
if (cs[2] != '') { document.getElementById('zipname').value=cs[2].replace('yyyymmdd', exstr); } else { document.getElementById('zipname').value=zipname; }
if (cs[3] != '') { document.getElementById('swir').value=cs[3]; swir=cs[3]; } else { document.getElementById('swir').value='' + swir; }
document.getElementById('subject').value=subject;
} else if (cs.length > 2) {
if (cs[0] != '') { document.getElementById('to').value=cs[0]; } else { document.getElementById('to').value=to; }
if (cs[1] == 'true') { nocamera=true; document.getElementById('nocamera').checked=nocamera; } else if (cs[1] == 'false') { nocamera=false; document.getElementById('nocamera').checked=nocamera; } else { document.getElementById('nocamera').checked=nocamera; }
if (cs[2] != '') { document.getElementById('zipname').value=cs[2].replace('yyyymmdd', exstr); } else { document.getElementById('zipname').value=zipname; }
document.getElementById('swir').value=swir;
document.getElementById('subject').value=subject;
} else if (cs.length > 1) {
if (cs[0] != '') { document.getElementById('to').value=cs[0]; } else { document.getElementById('to').value=to; }
if (cs[1] == 'true') { nocamera=true; document.getElementById('nocamera').checked=nocamera; } else if (cs[1] == 'false') { nocamera=false; document.getElementById('nocamera').checked=nocamera; } else { document.getElementById('nocamera').checked=nocamera; }
document.getElementById('zipname').value=zipname;
document.getElementById('swir').value=swir;
document.getElementById('subject').value=subject;
} else {
if (cs[0] != '') { document.getElementById('to').value=cs[0]; } else { document.getElementById('to').value=to; }
document.getElementById('nocamera').checked=nocamera;
document.getElementById('zipname').value=zipname;
document.getElementById('swir').value=swir;
document.getElementById('subject').value=subject;
}
if (forever) { setCookie('imagecapture'); }
}
if (document.getElementById('zipname').value != '') { document.getElementById('zipname').style.display='inline-block'; }

nocamera=location.search.split('nocamera=')[1] ? true : false;
try {
if (nocamera) { document.getElementById('cimage').removeAttribute('capture'); }
} catch(ee) {
}
if (nocamera) { document.getElementById('nocamera').checked=true; }

var input = document.querySelector('input[type=file]'); // see Example 4

input.onchange = function () {
var file = input.files; //[0];
cfile = file;

//alert(file.length);
done=false;
for (var ii=0; ii<file.length; ii++) {
if (ii == 0) { displayAsImage(file); } // see Example 7
if (ii == 0) { done=upload(file); }
if (eval(1 + eval('' + ii)) == file.length) { whenokdrawOnCanvas(); } // see Example 6
}
//if (done) { done=false; notfirstinsession=0; }
};

var cdate = new Date();
cdatestr=cdate.getFullYear() + ("0" + eval(1 + cdate.getMonth())).slice(-2) + ("0" + cdate.getDate()).slice(-2);
document.getElementById('zipname').placeholder+=' ... imagezip_' + cdatestr + '.zip';
}

function upload(file) {
if (!form) { form = new FormData(); }
if (!xhr) { xhr = new XMLHttpRequest(); }

if (notfirstinsession == 0) {
if (document.getElementById('to').value.indexOf('@') != -1) {
form.append('to', document.getElementById('to').value);
if (document.getElementById('subject').value != '') {
form.append('subject', document.getElementById('subject').value);
} else {
form.append('subject', 'Image in email');
}
form.append('filename', file[0].name);
}
notfirstinsession++;
form.append('image', file[0]);
if (document.getElementById('zipname').value != '') {
form.append('zipname', document.getElementById('zipname').value);
}
if (file.length > 1) {
for (var iii=1; iii<file.length; iii++) {
if (document.getElementById('to').value.indexOf('@') != -1) {
form.append('filename' + iii, file[iii].name);
}
notfirstinsession++;
form.append('image' + iii, file[iii]);
}
}
} else {
var ioff=notfirstinsession;
for (var iiii=0; iiii<file.length; iiii++) {
if (document.getElementById('to').value.indexOf('@') != -1) {
form.append('filename' + ioff, file[iiii].name);
}
notfirstinsession++;
form.append('image' + ioff, file[iiii]);
//alert('here is ioff=' + ioff);
ioff++;
}
}
if (eval('' + notfirstinsession) >= eval('' + swir)) {
//alert('here is');
xhr.open('post', 'mailto.php', true);
xhr.send(form);
notfirstinsession=0;
return true;
//} else if (eval('' + swir) > 0) {
//alert('here is notfirstinsession=' + notfirstinsession + ' and swir=' + swir);
}
return false;
}

function whenokdrawOnCanvas() {
if (kk == cfile.length) {
var imgs=document.getElementsByTagName('img');
var ztop=0;
for (var jjjk=0; jjjk<imgs.length; jjjk++) {
ztop+=eval('' + imgs[jjjk].style.height.replace('px',''));
}
if (ztop > atop) { atop=ztop; }
c = document.querySelector('canvas'), // see Example 4
ctx = c.getContext('2d'),
c.width = awidth;
c.height = Math.abs(atop);
if (atop < 0) {
atop = -atop;
}
if (swir == 0) {
for (var zjk=0; zjk<kk; zjk++) {
drawOnCanvas(cfile[zjk], tops[zjk]);
}
} else {
var jk=0;
for (var jjk=0; jjk<imgs.length; jjk++) {
ctx.drawImage(imgs[jjk], 0, tops[jjk]);
jk++;
}
for (var mjk=0; mjk<kk; mjk++) {
if (eval(jk + mjk) < tops.length) {
drawOnCanvas(cfile[mjk], tops[eval(jk + mjk)]);
}
}
}
kk=0;
if (done) { done=false; notfirstinsession=0; }
} else {
setTimeout(whenokdrawOnCanvas);
}
}

function displayAsImage(file) {
for (var ii=0; ii<file.length; ii++) {
imgURL.push(URL.createObjectURL(file[ii]));
img.push(document.createElement('img'));

img[eval(-1 + img.length)].onload = function() {
URL.revokeObjectURL(imgURL[eval(-1 + imgURL.length)]);
if (eval(('' + this.width).replace('px','')) > awidth) {
awidth=eval(('' + this.width).replace('px',''));
}
var imgs=document.getElementsByTagName('img');
var ztop=0;
for (var jjjk=0; jjjk<imgs.length; jjjk++) {
ztop+=eval('' + imgs[jjjk].style.height.replace('px',''));
}
if (ztop > atop) { atop=ztop; }
atop+=eval(('' + this.height).replace('px',''));
tops.push(atop);
this.id='img' + kk;
this.style.height='' + this.height + 'px';
kk++;
};

img[eval(-1 + img.length)].src = imgURL[eval(-1 + imgURL.length)];
dhuh.appendChild(img[eval(-1 + img.length)]);
var dv=document.createElement('div');
dv.id='dnhuh' + dnhuh;
dhuh.appendChild(dv);
dhuh=document.getElementById('dnhuh' + dnhuh);
dnhuh++;
}
}

function drawOnCanvas(file, xtop) {
var reader = new FileReader();

reader.onload = function (e) {
var dataURL = e.target.result, imgl = new Image();
// c = document.querySelector('canvas'), // see Example 4
// ctx = c.getContext('2d'),


imgl.onload = function() {
//c.width = img.width;
//c.height = img.height;
ctx.drawImage(imgl, 0, xtop);
};

imgl.src = dataURL;
};

reader.readAsDataURL(file);
}
</script>
</head>
<body onload='bp();' style='background-color:lightblue;'>
<h1>Image Capture Email</h1>
<h3>RJM Programming - October, 2018 - Thanks to <a target=_blank title='https://www.w3.org/TR/html-media-capture/' href='//www.w3.org/TR/html-media-capture/'>https://www.w3.org/TR/html-media-capture/</a></h3>
<script type='text/javascript'>
if (nocamera) {
document.write('<input style="display:inline-block;" type="file" name="image" id="cimage" accept="image/*" multiple>');
} else {
document.write('<input style="display:inline-block;" type="file" name="image" id="cimage" accept="image/*" multiple capture>');
}
</script>
 <input onblur="if (this.value.indexOf('@') != -1 && this.value != '@') { document.getElementById('zipname').style.display='inline-block'; } " id="to" name="to" type="text" style="inline-block;" placeholder="Optionally email to" value=""> <input id="subject" name="subject" type="text" style="inline-block;" placeholder="Optional email subject" value=""> <input onclick="if (this.value == '' && this.placeholder.indexOf(' ... ') != -1) { this.value=this.placeholder.split(' ... ')[1]; } " style="display:none;width:30%;" id="zipname" name="zipname" type="text" placeholder="Optional zipfile email attachment name" value=""> <select name=swir id=swir onchange="swir=eval(this.value);"><option value='0'>Send Each Time</option><option value='1'>Send 1 or Over</option><option value='2'>Send 2 or Over</option><option value='3'>Send 3 or Over</option><option value='4'>Send 4 or Over</option><option value='5'>Send 5 or Over</option><option value='6'>Send 6 or Over</option><option value='7'>Send 7 or Over</option><option value='8'>Send 8 or Over</option><option value='9'>Send 9 or Over</option></select> <input onclick="nocamera=!nocamera; if (nocamera) { location.href=document.URL.split('#')[0].split('?')[0] + '?nocamera=true'; } else if (document.URL.indexOf('nocamera=') != -1) { location.href=document.URL.split('#')[0].split('?')[0]; } " type='checkbox' id='nocamera' style='display:inline-block;'>No Camera</input> <input type='checkbox' id='forever' onclick="setCookie('imagecapture');" style='display:inline-block;'>Remember Me?</input>
<hr><div id=demail></div><hr>
<script type='text/javascript'>

function isIEorEDGE() {
return navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1);
}

if (isIEorEDGE()) {
document.write('<br>Canvas image(s) via [canvasContext].drawImage() below ...<br><canvas></canvas>');
} else {
document.write('<details><summary>Canvas image(s) via [canvasContext].drawImage() below ...</summary><canvas></canvas></details>');
}
</script>
<hr><p>Image(s) below ...</p>
</body>
</html>