<!DOCTYPE html>
<html>
<head>
<title>Video Masking via Canvas - RJM Programming - Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas</title>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-color: #3B3B3B;
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}

img.sepia {
-webkit-filter: sepia(1);
filter: sepia(1);
}

img.saturate {
-webkit-filter: saturate(8);
filter: saturate(8);
}

img.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}

img.opacity {
-webkit-filter: opacity(.2);
filter: opacity(.2);
}

img.brightness {
-webkit-filter: brightness(3);
filter: brightness(3);
}

img.contrast {
-webkit-filter: contrast(4);
filter: contrast(4);
}

img.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}

img.drop-shadow {
-webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
}

</style>

<script type='text/javascript'>
var extras=(location.search.split('extras=')[1] ? decodeURIComponent(location.search.split('extras=')[1].split('&')[0]) : '');
var nocamera=false;
var novideo=false;
var done=false;
var zolcmd='';


var ourmimetype='';
var types = ["video/mp4","image/svg","audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid",
"audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg",
"video/x-la-asf","video/ogg","video/webm","audio/mp4", "image/jpeg", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tif",
"text/html", "text/html", "text/html", "text/javascript", "text/css", "text/plain", "text/xml", "text/csv",
"application/vnd.ms-word", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/x-php", "application/pdf",
"application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint",
"application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
var exts = [".mp4",".svg",".wav",".wav",".ram",".m3u",".aiff",".mp3",".rmi",
".snd",".ogg",".movie",".avi",".mov",".mp3",".m4v",".mpeg",
".lsx",".ogv",".webm",".m4a", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tif",
".htm", ".html", ".htmls", ".js", ".css", ".txt", ".xml", ".csv",
".doc", ".docx", ".php", ".pdf",
".pptx", ".ppt",
".xls", ".xlsx"];

var dvsuffix="<span class=readVBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=vbut style=background-color:pink;display:none;>Process</button></span>";
var disuffix="<span class=readIBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=ibut style=background-color:pink;display:none;>Process</button></span>";


var c2suffix="", c2suffixv="";
var xalp="0123456789abcdef";
var ln=0, fnames=[""], kk=0;
var bn=0;
var wsuff="";
var mfile=null, lastl=-1;
var wcol="#927566";
var uprefix="video.mp4";
var usuff="";
var usuffix=location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]).split('&')[0] : "";
if (usuffix != "") {
uprefix="";
usuff="&video=" + encodeURIComponent(usuffix);
}
var omr=location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]).split('&')[0] : "";
if (omr != '') { setTimeout(andlater,900); wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + omr; ln=eval(eval('' + omr) % 16); bn=eval(eval(eval('' + omr) - ln) / 16); wcol=wcol.replace('92', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2)); }
var omg=location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]).split('&')[0] : "";
if (omg != '') { setTimeout(andlater,700); wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + omg; ln=eval(eval('' + omg) % 16); bn=eval(eval(eval('' + omg) - ln) / 16); wcol=wcol.replace('7566', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2) + '66'); }
var omb=location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]).split('&')[0] : "";
if (omb != '') { setTimeout(andlater,500); wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + omb; ln=eval(eval('' + omb) % 16); bn=eval(eval(eval('' + omb) - ln) / 16); wcol=wcol.substring(0,5) + ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2); }
//alert(wcol);

function andlater() {
if (omr != '') { document.getElementById('mr').value=omr; }
if (omg != '') { document.getElementById('mg').value=omg; }
if (omb != '') { document.getElementById('mb').value=omb; }
}

function torgba(inc) {
var opa="1.0";
var i, j=0, csess="rgba(:::1.0)", alp="0123456789abcdef", factor=16;
for (i=0; i<=inc.replace('#','').length; i++) {
if (i == 1) {
csess=csess.replace('rgba(:','rgba(' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 3) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 5) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else {
j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1))));
}
csess = csess.replace(":1.0)",":" + opa + ")");
}
document.getElementById('mr').value=csess.split('(')[1].split(':')[0];
wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + document.getElementById('mr').value;
document.getElementById('mg').value=csess.split('(')[1].split(':')[1];
wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + document.getElementById('mg').value;
document.getElementById('mb').value=csess.split('(')[1].split(':')[2];
wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + document.getElementById('mb').value;
if (document.URL.indexOf('?') == -1) {
location.href=document.URL + '?' + wsuff.substring(1);
} else if (document.URL.indexOf('mr=') != -1) {
location.href=document.URL.split('mr=')[0] + wsuff.substring(1);
} else {
location.href=document.URL + wsuff;
}
return csess.replace(/\:/g,',');
}

function fixdiv(ocb) {
if (document.getElementById('dimage').innerHTML.indexOf(' capture') != -1) {
nocamera=true;
document.getElementById('dimage').innerHTML='↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple>' + disuffix;
onl();
} else {
nocamera=false;
document.getElementById('dimage').innerHTML='↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple capture>' + disuffix;
onl();
}
}

function fixvdiv(ocb) {
if (document.getElementById('dvideo').innerHTML.indexOf(' capture') != -1) {
nocamera=true;
document.getElementById('dvideo').innerHTML='⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple>' + dvsuffix;
onl();
} else {
nocamera=false;
document.getElementById('dvideo').innerHTML='⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple capture>' + dvsuffix;
onl();
}
}

function doc2suffix() {
c2suffix="";
if (document.getElementById('xoff').value != '' || document.getElementById('yoff').value != '') {
c2suffix=" background-origin:";
if (document.getElementById('xoff').value != '') { if (document.getElementById('xoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('xoff').value + ' '; } else { c2suffix+=document.getElementById('xoff').value + 'px '; } }
if (document.getElementById('yoff').value != '') { if (document.getElementById('yoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('yoff').value; } else { c2suffix+=document.getElementById('yoff').value + 'px'; } }
}
if (('' + document.getElementById("c2").style.background) != '') {
if (c2suffix != '') {
document.getElementById("c2").style.backgroundPosition=c2suffix.split(':')[1];
} else {
document.getElementById("c2").style.backgroundPosition='';
}
}
}

function doc2suffixv() {
c2suffixv="";
if (document.getElementById('xoffv').value != '' || document.getElementById('yoffv').value != '') {
c2suffixv=" background-origin:";
if (document.getElementById('xoffv').value != '') { if (document.getElementById('xoffv').value.replace('%','px').indexOf('px') != -1) { c2suffixv+=document.getElementById('xoffv').value + ' '; } else { c2suffixv+=document.getElementById('xoffv').value + 'px '; } document.getElementById("video").style.marginLeft=c2suffixv.split(':')[1]; }
if (document.getElementById('yoffv').value != '') { if (document.getElementById('yoffv').value.replace('%','px').indexOf('px') != -1) { c2suffixv+=document.getElementById('yoffv').value; document.getElementById("video").style.marginTop=document.getElementById('yoffv').value; } else { c2suffixv+=document.getElementById('yoffv').value + 'px'; document.getElementById("video").style.marginTop=document.getElementById('yoffv').value + 'px'; } }
}
if (('' + document.getElementById("divv1").style.marginTop + document.getElementById("divv1").style.marginLeft) != '') {
if (c2suffixv != '') {
c2suffixv=c2suffixv;
} else {
document.getElementById("divv1").style.marginTop='0px';
document.getElementById("divv1").style.marginLeft='0px';
}
}
}

function drawBackOfCanvas(file) {
var reader = new FileReader();

reader.onloadend = function (e) {
var c2suffix="";
if (document.getElementById('xoff').value != '' || document.getElementById('yoff').value != '') {
c2suffix=" background-origin:";
if (document.getElementById('xoff').value != '') { if (document.getElementById('xoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('xoff').value + ' '; } else { c2suffix+=document.getElementById('xoff').value + 'px '; } }
if (document.getElementById('yoff').value != '') { if (document.getElementById('yoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('yoff').value; } else { c2suffix+=document.getElementById('yoff').value + 'px'; } }
}
document.getElementById("c2").style.background="URL('" + e.target.result + "')";
if (c2suffix != '') {
document.getElementById("c2").style.backgroundPosition=c2suffix.split(':')[1];
} else {
document.getElementById("c2").style.backgroundPosition='';
}
};

reader.readAsDataURL(file);
}

function newVideo(file) {
var reader = new FileReader();

reader.onloadend = function (e) {
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// alert(ourmimetype + ' ... ' + e.target.result);
//}
if (document.getElementById("svideo")) {
//alert(ourmimetype + ' ... ' + e.target.result);
//document.getElementById("svideo").type=ourmimetype;
document.getElementById("svideo").src=e.target.result;
document.getElementById("video").src=e.target.result;
} else {
document.getElementById("video").src=e.target.result;
}
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
document.getElementById("c1").addEventListener('mousemove', zoom);
document.getElementById("c1").addEventListener('touchmove', zoom);
document.body.addEventListener('click', zoom);
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
};

reader.readAsDataURL(file);
}

function preido(ith) {
ith.value=null;
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (1 == 11) { document.getElementById("ibut").style.display='inline-block'; } else { setTimeout(ido,1200); } }
}

function prevdo(ith) {
ith.value=null;
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (1 == 11) { document.getElementById("vbut").style.display='inline-block'; } else { setTimeout(vdo,1200); } }
}

function vdo() {
//alert(11);
//document.getElementById("vbut").style.display='inline-block';
document.getElementById("vbut").click();
}

function ido() {
//document.getElementById("ibut").style.display='inline-block';
document.getElementById("ibut").click();
}


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

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

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {

//alert(65);
document.querySelector('.readIBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readIBlob(startByte, endByte);
}
}, false);
//alert(165);

document.querySelector('.readVBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readVBlob(startByte, endByte);
}
}, false);
//alert(265);

input.addEventListener('change', function () {
document.getElementById("ibut").click();
});
//alert(365);

vinput.addEventListener('change', function () {
//alert(445);
document.getElementById("vbut").click();
});
// alert(565);

input.addEventListener('click', function () {
preido(document.getElementById("ibut")); //.click();
});
//alert(665);

vinput.addEventListener('click', function () {
//alert(745);
prevdo(document.getElementById("vbut")); //.click();
});

//alert(56);


} else {

input.addEventListener('change', function () {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert('Ready?'); }
var file = input.files; //[0];
//cfile = file;

done=false;
for (var ii=0; ii<file.length; ii++) {

if (kk == 0) {
fnames=[""];
fnames[0]=file[ii].name;
} else if (ii >= fnames.length) {
fnames.push(file[ii].name);
} else {
fnames[ii]=file[ii].name;
}

ourmimetype="";
for (var ji=0; ji<exts.length; ji++) {
if (("." + file[ii].name.split('.')[eval(-1 + file[ii].name.split('.').length)]).toLowerCase() == exts[ji].toLowerCase()) {
ourmimetype=types[ji];
}
}

//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert('Ready?'); }
if (ourmimetype.indexOf('image') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { drawBackOfCanvas(file[ii]); }
kk++;
}
});

vinput.addEventListener('change', function () {

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert('Ready?'); }

//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert(1); }
var vfile = vinput.files; //[0];
//cfile = vfile;

//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert(2); }

done=false;
for (var ii=0; ii<vfile.length; ii++) {

//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { alert(ii); }
if (kk == 0) {
fnames=[""];
fnames[0]=vfile[ii].name;
} else if (ii >= fnames.length) {
fnames.push(vfile[ii].name);
} else {
fnames[ii]=vfile[ii].name;
}

ourmimetype="";
for (var ji=0; ji<exts.length; ji++) {
if (("." + vfile[ii].name.split('.')[eval(-1 + vfile[ii].name.split('.').length)]).toLowerCase() == exts[ji].toLowerCase()) {
ourmimetype=types[ji];
}
}

if (ourmimetype.indexOf('video') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { newVideo(vfile[ii]); }
kk++;
}
});

}
}

function wup(incw) {
var wis=eval(('' + document.getElementById('video').style.width).replace('px',''));
wis+=incw;
document.getElementById('divv1').style.width='' + eval(20 + wis) + 'px';
document.getElementById('video').style.width='' + wis + 'px';
}

function hup(inch) {
var hisbr=document.getElementById('video').getBoundingClientRect();
var his=eval(('' + hisbr.height).replace('px','')); //eval(('' + document.getElementById('video').style.height).replace('px',''));
var hisbrd=document.getElementById('divv1').getBoundingClientRect();
var hisd=eval(('' + hisbrd.height).replace('px','')); //eval(('' + document.getElementById('video').style.height).replace('px',''));
his+=inch;
hisd+=inch;
//document.getElementById('divv1').style.height='' + hisd + 'px';
document.getElementById('video').style.height='' + his + 'px';
}


function readVBlob(opt_startByte, opt_stopByte) {
//alert(1);
var files = document.getElementById('cvideo').files;
if (!files.length) {
alert('Please select a file!');
return;
}
//alert(2);

mfile = files[0];
//alert(3);
filen = mfile.name;
//alert(4);
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || mfile.size - 1;
//alert(5);

var reader = new FileReader();
//alert(6);

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(e) {
//alert(3);
if (e.target.readyState == FileReader.DONE) { // DONE == 2
//alert(35);
//alert(e.target.result);
if (lastl != e.target.result.length) {
lastl=e.target.result.length;
if (document.getElementById("svideo")) {
//alert(ourmimetype + ' ... ' + e.target.result);
//document.getElementById("svideo").type=ourmimetype;
document.getElementById("svideo").src=e.target.result;
document.getElementById("video").src=e.target.result;
} else {
document.getElementById("video").src=e.target.result;
}
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
document.getElementById("c1").addEventListener('mousemove', zoom);
document.getElementById("c1").addEventListener('touchmove', zoom);
document.body.addEventListener('click', zoom);
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
}
}
};

var blob = mfile.slice(start, stop + 1);
reader.readAsDataURL(mfile); //blob);
}

function readIBlob(opt_startByte, opt_stopByte) {

var files = document.getElementById('cimage').files;
if (!files.length) {
alert('Please select a file!');
return;
}

mfile = files[0];
filen = mfile.name;
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || mfile.size - 1;

var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(e) {
if (e.target.readyState == FileReader.DONE) { // DONE == 2
if (lastl != e.target.result.length) {
lastl=e.target.result.length;
var c2suffix="";
if (document.getElementById('xoff').value != '' || document.getElementById('yoff').value != '') {
c2suffix=" background-origin:";
if (document.getElementById('xoff').value != '') { if (document.getElementById('xoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('xoff').value + ' '; } else { c2suffix+=document.getElementById('xoff').value + 'px '; } }
if (document.getElementById('yoff').value != '') { if (document.getElementById('yoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('yoff').value; } else { c2suffix+=document.getElementById('yoff').value + 'px'; } }
}
document.getElementById("c2").style.background="URL('" + e.target.result + "')";
if (c2suffix != '') {
document.getElementById("c2").style.backgroundPosition=c2suffix.split(':')[1];
} else {
document.getElementById("c2").style.backgroundPosition='';
}
}
}
};

var blob = mfile.slice(start, stop + 1);
reader.readAsDataURL(mfile); //blob);
}

</script>


</head>

<body onload=setTimeout(onl,2000);>
<div>
<script type='text/javascript'>
if (1 == 11 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write("<div id=divv1 style='display:inline-block;width:320px;overflow:scroll;-webkit-overflow-scrolling:touch;'><video style='width:300px;' id='video' controls='true'><source id=svideo src='" + (location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]) : (uprefix + usuffix)) + "'></source></video></div><div style=display:inline-block;><a onclick=wup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=wup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=wup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br><br><br><br><a onclick=hup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=hup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=hup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br></div>");
} else {
document.write("<div id=divv1 style='display:inline-block;width:320px;overflow:scroll;-webkit-overflow-scrolling:touch;'><video style='width:300px;' id='video' src='" + (location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]) : (uprefix + usuffix)) + "' controls='true'/></div><div style=display:inline-block;><a onclick=wup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=wup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=wup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br><br><br><br><a onclick=hup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=hup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=hup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br></div>");
}
</script>
</div>
<div>
<div id=divc1 style='display:inline-block;width:120px;overflow:scroll;-webkit-overflow-scrolling:touch;'><canvas id="c1" width="120" height="192"></canvas></div>
<script type='text/javascript'>
if (1 == 5 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write('<div id=dic1 style=display:inline-block;><img onload=" if (olcmd.length > 0) { eval(olcmd); olcmd=zolcmd; } " style=display:none; id="ic1" width="120" height="192" src=></img></div>');
} else {
document.write('<img onload=" if (olcmd.length > 0) { eval(olcmd); olcmd=zolcmd; } " style=display:none; id="ic1" width="120" height="192" src=></img>');
}
document.write("<div id=divc2 style='display:inline-block;width:120px;overflow:scroll;-webkit-overflow-scrolling:touch;'><canvas style='background" + (location.search.split('bcol=')[1] ? ('-image:' + decodeURIComponent(location.search.split('bcol=')[1].split('&')[0])).replace('-image:#','-color:#') : '-color:#3B3B3B') + ";' id='c2' width='120' height='192'></canvas></div>");
document.write(" <input data-onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff; \" onchange=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff;\" type=color value='" + (location.search.split('bcol=')[1] ? (decodeURIComponent(location.search.split('bcol=')[1].split('&')[0]) + '#').split('#')[1].replace('RelativeImageURL)','#3B3B3B') : '#3B3B3B') + "' id='mycolour' title='Canvas Background Colour'></input><br><input style=width:90%; id=myrurl placeholder='../images/flowers.png#RelativeImageURL' value='' onclick=\"this.value=this.placeholder;\" onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent('URL(' + this.value + ')') + usuff; \"></input><br><input type=text id=myvurl placeholder=\"video.mp4#RelativeVideoURL\" style=\"width:90%;\" value=\"\" onclick=\"this.value=this.placeholder;\" onblur=\"if (this.value != '') { usuff='&video=' + encodeURIComponent(this.value); document.getElementById('video').src=this.value; usuffix=this.value; }\"></input><br><input type=color id='mymcol' onchange=\"torgba(this.value);\" value='" + wcol + "' title='Video Mask Colour'></input>");
document.write("<input type=hidden value=" + (location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]) : '146') + " id=mr></input><input type=hidden value=" + (location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]) : '117') + " id=mg></input><input type=hidden value=" + (location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]) : '101') + " id=mb></input>  <select title='Hover over left hand canvas for continual movement on ++ options' onchange=cssfilter(event); id=mode title='Video Manipulation Mode'><option value=0>⬅ See Through ↗</option><option value=1>Grayscale</option><option value=2>Invert</option><option value=03>Sepia++</option><option value=003>Saturate++</option><option value=0003>Hue-Rotate++</option><option value=00003>Opacity++</option><option value=000003>Brightness++</option><option value=0000003>Contrast++</option><option value=00000003>Blur++</option><option value=000000003>Drop-Shadow++</option><option value=15>Magnifier x5 of Left Canvas</option><option value=3>Magnifier x1</option><option value=12>Magnifier x4</option><option value=9>Magnifier x3</option><option value=6>Magnifier x2</option><option value=30>Magnifier x10</option><option value=60>Magnifier x20</option><option value=90>Magnifier x30</option><option value=120>Magnifier x40</option></select><br>");
if (nocamera) {
document.write('<div id=dimage style=display:inline-block;>↗ <input onclick=preido(this); style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple><span class=readIBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=ibut style=background-color:pink;display:none;>Process</button></span></div><input onchange=fixdiv(this); type=checkbox id=nocamera style=display:inline-block;>Camera</input><br><input onblur=doc2suffix(); type=text placeholder="X offset [0]" value="" id=xoff></input><input onblur=doc2suffix(); type=text placeholder="Y offset [0]" value="" id=yoff></input>');
} else {
document.write('<div id=dimage style=display:inline-block;>↗ <input onclick=preido(this); style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple capture><span class=readIBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=ibut style=background-color:pink;display:none;>Process</button></span></div><input checked=true onchange=fixdiv(this); type=checkbox id=nocamera style=display:inline-block;>Camera</input><br><input onblur=doc2suffix(); type=text placeholder="X offset [0]" value="" id=xoff></input><input onblur=doc2suffix(); type=text placeholder="Y offset [0]" value="" id=yoff></input><br><br>');
}
if (novideo) {
document.write('<div id=dvideo style=display:inline-block;>⬅ <input onclick=prevdo(this); style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple><span class=readVBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=vbut style=background-color:pink;display:none;>Process</button></span></div><input onchange=fixvdiv(this); type=checkbox id=novideo style=display:inline-block;>Recorder</input><br><input onblur=doc2suffixv(); type=text placeholder="X offset [0]" value="" id=xoffv></input><input onblur=doc2suffixv(); type=text placeholder="Y offset [0]" value="" id=yoffv></input>');
} else {
document.write('<div id=dvideo style=display:inline-block;>⬅ <input onclick=prevdo(this); style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple capture><span class=readVBytesButtons><button style=display:none; data-startbyte=0 data-endbyte=4>1-5</button><button style=display:none; data-startbyte=5 data-endbyte=14>6-15</button><button style=display:none; data-startbyte=6 data-endbyte=7>7-8</button><button id=vbut style=background-color:pink;display:none;>Process</button></span></div><input checked=true onchange=fixvdiv(this); type=checkbox id=novideo style=display:inline-block;>Recorder</input><br><input onblur=doc2suffixv(); type=text placeholder="X offset [0]" value="" id=xoffv></input><input onblur=doc2suffixv(); type=text placeholder="Y offset [0]" value="" id=yoffv></input>');
}
</script>
</div>

<input type=text style="position:absolute;top:-2000px;left:-2000px;" value=""></input>

<div style='display:none;' id="byte_range"></div>
<div style='display:none;' id="byte_content"></div>

<script type="text/javascript" src="processor.js?zx=er"></script>
</body>
</html>