<!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 kk=0;
var cimg=[];

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

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

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

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) {
var form = new FormData(), xhr = new XMLHttpRequest();

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);
}
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);
}
form.append('image' + iii, file[iii]);
}
}
xhr.open('post', 'mailto.php', true);
xhr.send(form);
}

function whenokdrawOnCanvas() {
if (kk == cfile.length) {
c = document.querySelector('canvas'), // see Example 4
ctx = c.getContext('2d'),
c.width = awidth;
c.height = Math.abs(atop);
if (atop < 0) {
atop = -atop;
}
for (var jk=0; jk<kk; jk++) {
drawOnCanvas(cfile[jk], tops[jk]);
}
} else {
setTimeout(whenokdrawOnCanvas);
}
}

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

img[ii].onload = function() {
URL.revokeObjectURL(imgURL[ii]);
if (eval(('' + this.width).replace('px','')) > awidth) {
awidth=eval(('' + this.width).replace('px',''));
}
atop-=eval(('' + this.height).replace('px',''));
tops.push(-atop);
kk++;
};

img[ii].src = imgURL[ii];
document.body.appendChild(img[ii]);
}
}

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

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

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

img.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>
<input type="file" name="image" accept="image/*" multiple capture> <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="">
<hr><div id=demail></div><hr><details><summary>Canvas image(s) via [canvasContext].drawImage() below ...</summary>
<canvas></canvas>
</details>
<hr><p>Image(s) below ...</p>
</body>
</html>