<!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';

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) {
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',''));
var myh=eval(window.getComputedStyle(document.body, null).getPropertyValue('height').replace('px',''));
//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('aemail').click();
}
}
}
return inww;
}

function onl() {
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 != '') {
//alert(canvis.replace(/canvas/g,'body'));
document.body.innerHTML=canvis.replace(/canvas/g,'body');
var huhs=canvis.replace(/\-image-source\:/g,'-image:').replace(/\-image\:\ url/g,'-image:url').split('background-image:url(');
if (huhs.length > 1) {
//alert("url(" + huhs[1].split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")");
document.body.style.backgroundImage="url(" + huhs[1].split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")";
}
huhs=canvis.replace(/\-image-source\:/g,'-image:').replace(/\-image\:\ url/g,'-image:url').split('border-image:url(');
if (huhs.length > 1) {
//alert("URL(" + huhs[1].split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")");
document.body.style.borderImage="url(" + huhs[1].split(')')[0].replace('"','').replace('"','').replace("'",'').replace("'",'') + ")";
}
}
}
</script>
</head>
<body onload='onl();' id='myb' style=" 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; ">
<div 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'; cmode=doct('body'); } ">Email</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>
<a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'>Email</a>
</body>
</html>