<!doctype html>
<html>
<head>
<title>Emoji Border and/or Background Image to Body/Canvas - RJM Programming - August, 2018</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>

body { position:absolute; width: calc(100% - 180px); height: calc(100vh - 180px); display: block; text-align: bottom; border: 80px solid red; border-image: url("//twemoji.maxcdn.com/2/72x72/1f44d.png") 100% round; border-image-repeat: repeat; background-image-repeat: repeat; }

</style>

<script type='text/javascript'>

var bmode='border';
var cmode='body';
var wasa='';
var lasttvi='1f44d';
var whereto="'ifb'"; // '_blank';
whereto="'_blank'";

function analyze(tvi) {
if (tvi.textContent != '') {
if (tvi.textContent.length <= 2) {
if (bmode == 'border') {
lasttvi=tvi.textContent.codePointAt(0).toString(16);
document.getElementById('myb').style.borderImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.textContent.codePointAt(0).toString(16) + '.png")';
} else {
document.getElementById('myb').style.backgroundImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.textContent.codePointAt(0).toString(16) + '.png")';
}
} else {
if (bmode == 'border') {
lasttvi=tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'');
document.getElementById('myb').style.borderImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'') + '.png")';
} else {
document.getElementById('myb').style.backgroundImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'') + '.png")';
}
}
}
}

function doct(inww) {
// border: 80px solid red; border-image: url('//twemoji.maxcdn.com/2/72x72/1f44d.png') 100% round; border-image-repeat: repeat; background-image-repeat: repeat;
if (inww.toLowerCase() == 'canvas') {
var boh=document.body.outerHTML;
boh=document.getElementById('myb').outerHTML;
if (boh.split('>')[0].indexOf('border-image') == -1) {
boh=boh.replace(' style="', ' style="border: 80px solid red; border-image: url(//twemoji.maxcdn.com/2/72x72/1f44d.png) 100% round; border-image-repeat: repeat; background-image-repeat: repeat;'.replace('1f44d',lasttvi));
}
if (!document.getElementById('mycanvas')) {
var myw=eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px',''));
myw+=160;
var myh=eval(window.getComputedStyle(document.body, null).getPropertyValue('height').replace('px',''));
myh+=160;
//alert(boh.split('>')[0].replace('<body','<canvas width=' + myw + ' height=' + myh).replace('myb','mycanvas').replace(' onload=',' data-onload=').replace('left:','data-left:').replace('top:','data-top:').replace('width:','data-width:').replace('height:','data-height:').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7;') + '></canvas>');
//document.body.innerHTML=boh.split('>')[0].replace('<body','<canvas width=' + myw + ' height=' + myh).replace('myb','mycanvas').replace(' onload=',' data-onload=').replace('left:','data-left:').replace('top:','data-top:').replace('width:','data-width:').replace('height:','data-height:').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7;') + '></canvas>';
//alert(boh.split('>')[0].replace('<body','<canvas width=' + myw + ' height=' + myh).replace('myb','mycanvas').replace(' onload="onl();"',' ').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7;').replace(/\"\;/g,'').replace('"//','"http://').replace('"//','"http://').replace('"//','"http://').replace('(//','(http://').replace('(//','(http://') + '></canvas>');
var cis=boh.split('>')[0].replace('<body','<canvas width=' + myw + ' height=' + myh).replace('myb','mycanvas').replace(' onload="onl();"',' ').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7; ').replace(/\"\;/g,'').replace('"//','"http://').replace('"//','"http://').replace("'//","'http://").replace("'//","'http://").replace('"//','"http://').replace('(//','(http://').replace('(//','(http://') + '></canvas>';
cis=boh.split('>')[0].replace('<body','<canvas').replace('myb','mycanvas').replace(' onload="onl();"',' ').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7; width:' + myw + 'px; height:' + myh + 'px;').replace(/\"\;/g,'').replace('"//','"http://').replace('"//','"http://').replace("'//","'http://").replace("'//","'http://").replace('"//','"http://').replace('(//','(http://').replace('(//','(http://') + '></canvas>';
if (1 == 2) {
//cis=boh.split('>')[0].replace('<body','<canvas').replace('myb','mycanvas').replace(' onload="onl();"',' ').replace(' style="',' style="top:0px;left:0px;position:absolute;z-index:7; width:' + myw + 'px; height:' + myh + 'px;').replace(/\"\;/g,'').replace('"//','"http://').replace('"//','"http://').replace("'//","'http://").replace("'//","'http://").replace('"//','"http://').replace('(//','(http://').replace('(//','(http://') + '></canvas>';
//alert(cis);
var wo=window.open('','_blank','top=0,left=0,height=800,width=800');
wo.document.write(cis); //.replace(/canvas/g,'body'));
wo.document.write("<scr" + "ipt type='text/javascript'> document.body.style.borderImage=\"url('http://twemoji.maxcdn.com/2/72x72/1f44d.png')\"; </scr" + "ipt>");
} else if (3 == 4) {
location.href=document.URL.split('#')[0].split('?')[0] + '?canvas=' + encodeURIComponent(cis);
} else {
//alert(cis);
document.getElementById('aemail').href=wasa + encodeURIComponent(encodeURIComponent(cis));
//alert(document.getElementById('aemail').href);
document.getElementById('ifbx').src=document.URL.split('#')[0].split('?')[0] + '?canvas=' + encodeURIComponent(cis);
//document.getElementById('ifb').style.zIndex='7';
//document.getElementById('ifb').style.display='block';
setTimeout(aem,3000); //document.getElementById('aemail').click();
}
}
}
return inww;
}

function aem() {
document.getElementById('aemail').click();
}

function onl() {
var pw=900, ph=900, iw=0, ih=0;
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?canvas=');
wasa=document.getElementById('aemail').href;
var canvis=location.search.split('canvas=')[1] ? decodeURIComponent(location.search.split('canvas=')[1].split('&')[0]) : '';
if (canvis != '') {
if (canvis.indexOf('width:') != -1) {
pw=eval(canvis.split('width:')[1].split('px')[0]);
}
if (canvis.indexOf('height:') != -1) {
ph=eval(canvis.split('height:')[1].split('px')[0]);
}
var huhs=canvis.replace(/\-image-source\:/g,'-image:').replace(/\-image\:\ url/g,'-image:url').split('background-image:');
var huhstwo=canvis.replace(/\-image-source\:/g,'-image:').replace(/\-image\:\ url/g,'-image:url').split('border-image:');
//alert('' + canvis.replace(/canvas/g,'body').indexOf('border-image:') + ' ... ' + canvis.replace(/canvas/g,'body'));
if (('' + document.referrer).indexOf('/right') != -1) {
var woo=null;
if (whereto.indexOf('ifb') != -1) {
canvis=canvis.replace('<canvas ','<canvas width=' + pw + ' height=' + ph + ' ').replace('<body ','<body width=' + pw + ' height=' + ph + ' ');
//document.getElementById('dfoot').innerHTML='<hr>';
//document.getElementById('ifb').style.top='' + ph + 'px';
document.getElementById('ifb').style.display='block';
location.href='#ifb';
woo=window.open('','ifb');
} else {
canvis=canvis.replace('<canvas ','<canvas width=' + pw + ' height=' + ph + ' ').replace('<body ','<body width=' + pw + ' height=' + ph + ' ');
woo=eval("window.open(''," + whereto + ")"); // '_blank','top=0,left=0,width=900,height=900');
}
canvis+="<scr" + "ipt type='text/javascript'> var elem=null, context=null, oborder=null, obackground=null; function alat() { elem=document.getElementById('mycanvas'); context=elem.getContext('2d'); if (document.getElementById('iborder')) { oborder=document.getElementById('iborder'); } if (document.getElementById('ibackground')) { obackground=document.getElementById('ibackground'); } } setTimeout(alat,2000); </scr" + "ipt>";
if (huhs.length > 1) {
for (iw=0; iw<=pw; iw+=80) {
for (ih=0; ih<=ph; ih+=80) {
canvis=canvis.replace(" } setTimeout(", " context.drawImage(obackground," + iw + "," + ih + "); } setTimeout(");
}
}
}
if (huhstwo.length > 1) {
for (iw=0; iw<=eval(-80 + pw); iw+=eval(-80 + pw)) {
for (ih=0; ih<=eval(-80 + ph); ih+=eval(-80 + ph)) {
canvis=canvis.replace(" } setTimeout(", " context.drawImage(oborder," + iw + "," + ih + "); } setTimeout(");
}
}
}
woo.document.write(canvis); //.replace(/canvas/g,'body');
//alert(document.body.innerHTML);
if (huhs.length > 1) {
woo.document.body.innerHTML+="<img style='display:none;' id=ibackground src='" + huhs[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "'></img>";
}
if (huhstwo.length > 1) {
woo.document.body.innerHTML+="<img style='display:none;' id=iborder src='" + huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "'></img>";
}
return '';
} else {
document.body.innerHTML=canvis.replace(/canvas/g,'body');
}
// document.write(canvis.replace(/canvas/g,'body'));
if (huhs.length > 1) {
//alert("url(" + huhs[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")");
document.body.style.backgroundImage="url('" + huhs[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "')";
if (!document.getElementById('ibackground')) {
document.body.innerHTML+="<img style='display:none;' id=ibackground src='" + huhs[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "'></img>";
} else {
document.getElementById('ibackground').src=huhs[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'');
}
}
if (huhstwo.length > 1) {
document.body.style.borderImage="url('" + huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "')";
if (!document.getElementById('iborder')) {
document.body.innerHTML+="<img style='display:none;' id=iborder src='" + huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "'></img>";
} else {
document.getElementById('iborder').src=huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'');
}
//document.body.innerHTML+=("<style> body { border-image:url('" + huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + "') 100% round; border-image-repeat: repeat; </style>");
//alert("URL(" + huhstwo[1].trim().replace('url(','').split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")");
}
if (document.getElementById('iborder') || document.getElementById('ibackground')) {

//alert(canvis);
//alert(document.referrer + ' ... ' + canvis);
}

}
}
</script>
</head>
<body onload='onl();' id='myb' style=" display: block; text-align: bottom; ">
<div id=dhead style='background-color: yellow;'>
<h1>Emoji Border and/or Background Image to <a id=tc title='Toggle between body and canvas' style='text-decoration:underline;cursor:pointer;' onclick=" if (cmode == 'body') { this.innerHTML='Body'; cmode=doct('canvas'); } else { this.innerHTML='Email and Canvas'; cmode=doct('body'); } ">Email and Canvas</a></h1>
<h3>RJM Programming <a title='Toggle between border and background' style='text-decoration:underline;cursor:pointer;' onclick=" if (bmode == 'border') { bmode='background'; } else { bmode='border'; } ">-</a> August, 2018</h4>
<h4>Emoji <a target="_blank" title="Other ways to paste Emojis" href="https://www.google.com.au/search?q=emoji+keyboard+shortcuts&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=x7JKWsrFGcHN8gfBy5rABw">placement</a> advice, in field below, for border or background image, thanks to <a target=_blank title='Emoji CSS' href='https://afeld.github.io/emoji-css/'>Emoji CSS</a>.</h4>
<div placeholder='Ideally enter HTML Entity (Hex) lowercase but can place an Emoji from an Emoji placement menu also' id='myr' contenteditable='true' onblur='analyze(this);' style='border: 1px solid blue;' title='Ideally enter HTML Entity (Hex) lowercase but can place an Emoji from an Emoji placement menu also'>1f44d</div>
</div>
<iframe frameborder=0 id=ifb name=ifb src='' style='display:none;z-index:-7;width:100px;height:900px;'></iframe>
<iframe frameborder=0 id=ifbx name=ifbx src='' style='display:none;z-index:-7;width:100px;height:900px;'></iframe>
<a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'>Email</a>
<img id=iborder src='' style='display:none;'></img>
<img id=ibackground src='' style='display:none;'></img>
</body>
</html>