4c4
< <title>Emoji Border and/or Background Image to Body/Canvas - RJM Programming - August, 2018</title>
---
> <title>Emoji Border or Background Image - RJM Programming - August, 2018</title>
8c8
< 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;  }
---
> body { width: calc(100% - 180px); height: calc(100vh - 180px); left:20px; top:50px; display: block; text-align: bottom; border-left: 80px solid red; border-bottom: 80px solid red;  border-top: 80px solid red; border-right: 80px solid red; border-image: url("//twemoji.maxcdn.com/2/72x72/1f44d.png") 100% round; border-image-repeat: repeat; background-image-repeat: repeat;  }
15,17d14
<  var cmode='body';
<  var wasa='';
<  var lasttvi='1f44d';
23d19
<      lasttvi=tvi.textContent.codePointAt(0).toString(16);
30d25
<      lasttvi=tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'');
38,91d32
<  
<  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(/\&quot\;/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(/\&quot\;/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(/\&quot\;/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(/\&quot\;/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("'",'') + ")";
<     }
<   }
<  }
94c35
< <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; ">
---
> <body id='myb'>
96c37
< <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>
---
> <h1>Emoji Border or Background Image</h1>
101d41
< <a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'>Email</a>