<?php
// canvas_svg.php
// Emoji Borders and Backgrounds in Canvas
// RJM Programming
// January, 2022
// Thanks to https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas
 
 $w='40';
 $h='40';
 $poemoji='';
 $prebimg='one.jpg';
 $bimg='one.jpg';
 $udirname=explode("canvas_svg.php", str_replace("::",":","http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~"))))) . "" . $_SERVER['REQUEST_URI'])[0];
 $svgmiddle='';
 $headstyle='<head><meta charset="utf-8"/></head>';
 $bp='';
 $preu='';
 $qpreu='';
 $udirnameprebimg='';
 
 if (isset($_GET['iurl'])) {
    $udirnameprebimg=str_replace('+',' ',urldecode($_GET['iurl']));
    if (strpos($udirnameprebimg, "//") === false) { if (strpos($udirnameprebimg, "www.") !== false) { $preu='http://'; } else if (strpos('`' . $udirnameprebimg, "`/") !== false) { $qpreu=$_SERVER['DOCUMENT_ROOT'];  $preu="http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "";  } else { $preu=$udirname; } }
    if (isset($_GET['emoji'])) {  $bp=' background-position: 30px 30px; '; } 
    $headstyle='<head><meta charset="utf-8"/><style> body { background-repeat:no-repeat; ' . $bp . ' background-image:URL("data:image/' . str_replace("jpg","jpeg",strtolower(explode(".", (explode('#',   urldecode($_GET['iurl'])   )[0]))[-1 + sizeof(explode(".", explode('#',urldecode($_GET['iurl']))[0]))])) . ';base64,' . base64_encode(file_get_contents($qpreu . explode('#',   urldecode($_GET['iurl'])   )[0])) . '"); </style></head>';
 } else if (isset($_POST['iurl'])) {
    $udirnameprebimg=str_replace('+',' ',urldecode($_POST['iurl']));
    if (strpos($udirnameprebimg, "//") === false) { if (strpos($udirnameprebimg, "www.") !== false) { $preu='http://'; } else if (strpos('`' . $udirnameprebimg, "`/") !== false) { $qpreu=$_SERVER['DOCUMENT_ROOT'];  $preu="http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "";  } else { $preu=$udirname; } }
    if (isset($_POST['emoji'])) {  $bp=' background-position: 30px 30px; '; } 
    $headstyle='<head><meta charset="utf-8"/><style> body { background-repeat:no-repeat; ' . $bp . ' background-image:URL("data:image/' . str_replace("jpg","jpeg",strtolower(explode(".", (explode('#',   urldecode($_POST['iurl'])   )[0]))[-1 + sizeof(explode(".", explode('#',urldecode($_POST['iurl']))[0]))])) . ';base64,' . base64_encode(file_get_contents($qpreu . explode('#',   urldecode($_POST['iurl'])   )[0])) . '"); </style></head>';
 } 
 
 function backg($indef) {
   global $prebimg, $bimg, $udirname, $poemoji, $w, $h, $svgmiddle;
   if (('' . $_SERVER['QUERY_STRING']) == '') { return $indef; }

   if ($svgmiddle == '') {
foreach ($_GET as $name=>$val) {
  if (strpos(strtolower('' . $name . '~'), 'css~') !== false || strpos(strtolower('' . $name . '~'), 'text~') !== false) {
    if ($svgmiddle == '') {
      $svgmiddle="&" . strtolower($name) . '=' . urlencode($val);
    } else {
      $svgmiddle.="&" . strtolower($name) . '=' . urlencode($val);
    } 
  }
}

foreach ($_POST as $name=>$val) {
  if (strpos(strtolower('' . $name . '~'), 'css~') !== false || strpos(strtolower('' . $name . '~'), 'text~') !== false) {
    if ($svgmiddle == '') {
      $svgmiddle="&" . strtolower($name) . '=' . urlencode($val);
    } else {
      $svgmiddle.="&" . strtolower($name) . '=' . urlencode($val);
    } 
  }
}

   }

   $preu='';
   $qpreu='';
   $inz="";
   $midbit="";
   $prefix=""; 
   $suffix="'";
   $makeitsvg=false;
   if ($indef == 'b64Start + svg64') { if (1 == 1) { return $indef; } $prefix="'"; $suffix="'"; } else if ($indef != '') { $makeitsvg=true; $midbit="&midbit=y"; $prefix=""; $suffix="";  }
   $pjbit='';
   $udirnameprebimg=$udirname . $prebimg;
     //file_put_contents('xz0000.xz0000','');
   if (isset($_GET['iurl'])) {
     $udirnameprebimg=str_replace('+',' ',urldecode($_GET['iurl']));
     if (strpos($udirnameprebimg, "//") === false) { if (strpos($udirnameprebimg, "www.") !== false) { $preu='http://'; } else if (strpos('`' . $udirnameprebimg, "`/") !== false) { $qpreu=$_SERVER['DOCUMENT_ROOT'];  $preu="http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "";  } else { $preu=$udirname; } }
     if (file_exists($qpreu . explode('#',$udirnameprebimg)[0])) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',explode('#',$udirnameprebimg)[0])[-1 + sizeof(explode('.',explode('#',$udirnameprebimg)[0]))])) . ';base64,' . base64_encode(file_get_contents($qpreu . explode('#',$udirnameprebimg)[0]));   }
   } else if (isset($_POST['iurl'])) {
     $udirnameprebimg=str_replace('+',' ',urldecode($_POST['iurl']));
     if (strpos($udirnameprebimg, "//") === false) { if (strpos($udirnameprebimg, "www.") !== false) { $preu='http://'; } else if (strpos('`' . $udirnameprebimg, "`/") !== false) { $qpreu=$_SERVER['DOCUMENT_ROOT'];  $preu="http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "";  } else { $preu=$udirname; } }
     if (file_exists($qpreu . explode('#',$udirnameprebimg)[0])) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',explode('#',$udirnameprebimg)[0])[-1 + sizeof(explode('.',explode('#',$udirnameprebimg)[0]))])) . ';base64,' . base64_encode(file_get_contents($qpreu . explode('#',$udirnameprebimg)[0]));   }
   }
   if (isset($_GET['emoji'])) {
     //file_put_contents('xz000.xz000','');
     $poemoji='<input type=hidden id=emoji name=emoji value="' . str_replace('+','',urldecode($_GET['emoji'])) . '"></input>';
     list($wdt, $hgt) = getimagesize($qpreu . explode('#',$udirnameprebimg)[0]);
     if ($wdt > 0 && $hgt > 0) {
     $w=$wdt;
     $h=$hgt;
     if (file_exists($udirnameprebimg)) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));   }
     //echo $udirname . "1:" . $hgt;
     if ($pjbit != '') {  if ($indef != '') { if ($prefix == '' && !$makeitsvg) { return $prefix . $pjbit . $suffix; }  if (!$makeitsvg) { $inz="Z"; }  }  if ($prefix == '' && !$makeitsvg) { $pjbit="'),URL('" . $pjbit; }   }
     if ($makeitsvg) { $pjbit=''; }
     //file_put_contents('xd.xd',$udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($udirnameprebimg) . "&width=" . (0 + $wdt) . "&height=" . (0 + $hgt) . "&insvg=" . str_replace('+','',urldecode($_GET['emoji'])));
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($preu . $udirnameprebimg) . "&width=" . (0 + $wdt) . "&height=" . (0 + $hgt) . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))) . $pjbit . $suffix; // . '),URL(' . $indef;
     } else {
     //echo "2:" . $hgt;
      //file_put_contents('xz001110.xz001110',''); 
     if ($makeitsvg) { $pjbit=''; }
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($preu . $udirnameprebimg) . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))) . $suffix; // . '),URL(' . $indef;
     }
   } else if (isset($_POST['emoji'])) {
     //file_put_contents('xz00.xz00','');
     $poemoji='<input type=hidden id=emoji name=emoji value="' . str_replace('+','',urldecode($_POST['emoji'])) . '"></input>';
     list($wdt, $hgt) = getimagesize($qpreu . explode('#',$udirnameprebimg)[0]);
     if ($wdt > 0 && $hgt > 0) {
     $w=$wdt;
     $h=$hgt;
     if (file_exists($udirnameprebimg)) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));   }
     if ($pjbit != '') { if ($indef != '') { if ($prefix == '' && !$makeitsvg) { return $prefix . $pjbit . $suffix; } if (!$makeitsvg) {  $inz="Z";  } }   if ($prefix == '' && !$makeitsvg) { $pjbit="'),URL('" . $pjbit; }   }
     if ($makeitsvg) { $pjbit=''; }
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($preu . $udirnameprebimg) . "&width=" . (0 + $wdt) . "&height=" . (0 + $hgt) . "&insvg=" . str_replace('+','',urldecode($_POST['emoji']))) . $pjbit . $suffix; // . '),URL(' . $indef;
     } else {
     if ($makeitsvg) { $pjbit=''; }
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($preu . $udirnameprebimg) . "&insvg=" . str_replace('+','',urldecode($_POST['emoji']))) . $suffix; // . '),URL(' . $indef;
     }
   //} else if (($indef == '' || $indef != '') && $prebimg != '') {
   } else if ($indef == '' && $prebimg != '') {
     //file_put_contents('xz0.xz0','');
     //echo $udirname . $prebimg . ' ...';
     //exit;
     list($wdt, $hgt) = getimagesize($qpreu . explode('#',$udirnameprebimg)[0]);
     if ($wdt > 0 && $hgt > 0) {
     $w=$wdt;
     $h=$hgt;
     if (file_exists($udirnameprebimg)) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));   }
     //echo $udirname . "1:" . $hgt;
     //exit;
     if ($pjbit != '' && !$makeitsvg) { return $pjbit;   }
     if ($makeitsvg) { $pjbit=''; }
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&image=" . urlencode($preu . $udirnameprebimg) . "&width=" . (0 + $wdt) . "&height=" . (0 + $hgt)) . $suffix; // . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))); // . '),URL(' . $indef;
//return $indef;
     } else {
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $svgmiddle . $midbit . "&noXbase64=y&image=" . urlencode($preu . $udirnameprebimg)) . $suffix; // . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))) . '),URL(' . $indef;
     }
   } else if ($indef != '' && $prebimg != '') {
     //file_put_contents('xz1.xz1','');
     list($wdt, $hgt) = getimagesize($qpreu . explode('#',$udirnameprebimg)[0]);
     if ($wdt > 0 && $hgt > 0) {
     $w=$wdt;
     $h=$hgt;
     if (file_exists($udirnameprebimg)) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));   }
     //echo $udirname . "1:" . $hgt;
     //exit;
     if ($pjbit != '') { return $pjbit;  }
     return $indef; //file_get_contents($udirname . "../inline_svg.php?asbackground=y&noXbase64=y&image=" . urlencode($udirnameprebimg) . "&width=" . (0 + $wdt) . "&height=" . (0 + $hgt)); // . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))); // . '),URL(' . $indef;
     } else {
     return $indef; //file_get_contents($udirname . "../inline_svg.php?asbackground=y&noXbase64=y&image=" . urlencode($udirnameprebimg)); // . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))) . '),URL(' . $indef;
     }
   } else {
     //file_put_contents('xz00000.xz00000','');
     return $indef;
   }
 }

 function maybedef($inzdef) {
    return backg($inzdef);
 }
?>
<html>
<head>
<title>Emoji Borders and Backgrounds in Canvas - RJM Programming - January, 2022 ... thanks to https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas</title>
<script type='text/javascript'>

var svgs=[];
var img; // = document.querySelector('img');
var canvas; // = document.querySelector('canvas');

// Thanks to https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

if (!String.fromCodePoint) {   // thanks to http://xahlee.info/js/js_unicode_code_point.html
// ES6 Unicode Shims 0.1 , Â© 2012 Steven Levithan , MIT License
    String.fromCodePoint = function fromCodePoint () {
        var chars = [], point, offset, units, i;
        for (i = 0; i < arguments.length; ++i) {
            point = arguments[i];
            offset = point - 0x10000;
            units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
            chars.push(String.fromCharCode.apply(null, units));
        }
        return chars.join('');
    }
}

function ctoilater() {
    img.src=canvas.toDataURL('data/png');
}
  
function onl() {
var iurl=location.search.split('iurl=')[1] ? decodeURIComponent(location.search.split('iurl=')[1].split('&')[0]) : '';
var emoji=location.search.split('emoji=')[1] ? decodeURIComponent(location.search.split('emoji=')[1].split('&')[0]) : '';

var svg = document.querySelector('svg');
img = document.querySelector('img');
canvas = document.querySelector('canvas');

svgs=document.getElementsByTagName('svg');
var imgs=document.getElementsByTagName('img');
var canvases=document.getElementsByTagName('canvas');

var height = eval('' + svgs[0].getAttribute("height"));
var width =  eval('' + svgs[0].getAttribute("width"));

var textcss=location.search.split('textcss=')[1] ? decodeURIComponent(location.search.split('textcss=')[1].split('&')[0]) : '';
var imagecss=location.search.split('imagecss=')[1] ? decodeURIComponent(location.search.split('imagecss=')[1].split('&')[0]) : '';
var css=location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : '';

if (document.getElementById('aemail')) {
  document.getElementById('aemail').href+=encodeURIComponent(document.URL);
}

if (document.getElementById('asms')) {
  document.getElementById('asms').href+=encodeURIComponent(document.URL);
}

//width+=20;
//height+=20;

imgs[0].width=width;
imgs[0].height=height;
canvases[0].width=width;
canvases[0].height=height;
imgs[0].style.width='' + width + 'px';
imgs[0].style.height='' + height + 'px';
canvases[0].style.width='' + width + 'px';
canvases[0].style.height='' + height + 'px';

if ((iurl != '' && document.URL.indexOf('noimage') == -1) && emoji != '') {
  //imgs[0].style.background='URL("' + iurl + '")';
  //canvases[0].style.background='URL("' + iurl + '")';
  if (emoji != '') {
    imgs[0].style.backgroundPosition='20px 20px';
  } 
  imgs[0].style.backgroundRepeat='no-repeat';
  canvases[0].style.backgroundRepeat='no-repeat';
  
  var newimg=document.createElement('img');
  newimg.onload = function() {
    // draw the image onto the canvas
    //alert('1:' + img.src);
    if (document.URL.indexOf('emoji=') != -1) {
    canvas.getContext('2d').drawImage(newimg, 20, 20);
    } else {
    canvas.getContext('2d').drawImage(newimg, 0, 0);
    }
    setTimeout(ctoilater, 3000);
    //alert('2');
  }
  newimg.src = iurl;
  
}

// get svg data
var xml = new XMLSerializer().serializeToString(svg);
//alert(xml);

// make it base64
var svg64 = ''; //btoa(xml);
var b64Start = ''; //'data:image/svg+xml;base64,';

<?php
 $mb=maybedef('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC');
 $bemb="";
 if (strpos($mb, "</svg>") !== false) {
 $mb='<svg' . explode('<svg', explode('</svg>', $mb)[0])[1] . '</svg>';
 $bemb='data:image/svg+xml;base64,' . base64_encode($mb);
 }

 if ($bemb == "") {
 echo "\n svg64 = btoa(xml); \n";
 echo "\n b64Start = 'data:image/svg+xml;base64,'; \n";
 }
?>

// prepend a "header"
var image64 = <?php echo maybedef('b64Start + svg64'); ?>;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    //alert('1:' + img.src);
    canvas.getContext('2d').drawImage(img, 0, 0);
    //alert('2');
}
    //alert('0:' + image64);
<?php
 if ($bemb != "") {
 echo "\n img.src = '" . $bemb . "'; \n";
 } else {
 echo "\n img.src = image64; \n";
 }
?>


if (css != '') {
  var gstyleis='';
  if (css == textcss) {
    gstyleis=' <style> </style> ';
    gstyleis=gstyleis.replace('</style', ' img, canvas { ' + textcss + ' } </style');
    if (imagecss != '') { gstyleis=gstyleis.replace(' } </style', ' ' + imagecss + ' } </style');   }
  } else if (css == imagecss) {
    gstyleis=' <style> </style> ';
    gstyleis=gstyleis.replace('</style', ' img, canvas { ' + imagecss + ' } </style');
    if (textcss != '') { gstyleis=gstyleis.replace(' } </style', ' ' + textcss + ' } </style');   }
  } else {
    gstyleis=' <style> </style> ';
    gstyleis=gstyleis.replace('</style', ' img, canvas { ' + css + ' } </style');
    if (textcss != '') { gstyleis=gstyleis.replace(' } </style', ' ' + textcss + ' } </style');   }
    if (imagecss != '') { gstyleis=gstyleis.replace(' } </style', ' ' + imagecss + ' } </style');   }
  }
  if (gstyleis != '') { document.getElementById('gstyle').innerHTML=gstyleis;   }
}


}


function eask() {
    var borderblurb='Please enter comma separated HTML decimal entity(s) for your Emoji Border to graphics. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).  Optionally append &iurl=[newImageURL[%23[circle|rect]]] to change base image.  Optionally append &[text|image]css=[CSSstyle] to change styling.   Optionally justify some text via &[ul|uc|ur|ml|[mc]|mr|bl|bc|br]text=[someText%0AsecondLine] to change styling.  Eg. ' + String.fromCodePoint(127958) + '&iurl=two.jpg#circle&css=opacity:0.9;font-size:20px;&textcss=text-shadow: -2px 2px 3px #ff2d95;&ultext=Hello%0AThere ';
    var borderis=prompt(borderblurb, '');
    var emojiy='';
    var esuff='';
    if (borderis == null) { 
      borderis=''; 
    } else { 
      var bbs=borderis.split('&iurl=');  
      var bbstwo=borderis.split('&'); 
      if (bbs.length > 1) { 
        esuff='&iurl=' + encodeURIComponent(bbs[1].replace(/\%23[cC][iI][rR][cC][lL][eE]/g, '#circle').replace(/\%23[eE][lL][lL][iI][pP][sS][eE]/g, '#ellipse').replace(/\%23[tT][eE][xX][tT]/g, '#text').replace(/\%23[lL][iI][nN][eE]/g, '#line').replace(/\%23[pP][oO][lL][yY][lL][iI][nN][eE]/g, '#polyline').replace(/\%23[pP][oO][lL][yY][gG][oO][nN]/g, '#polygon').replace(/\%23/g, encodeURIComponent('%23'))).replace(/\%26/g,'&').replace(/\%3D/g,'='); 
        if (bbstwo[0] != bbs[0]) { 
          esuff+='&' + encodeURIComponent(bbstwo[1].split('&iurl=')[0].replace(/\%23[cC][iI][rR][cC][lL][eE]/g, '#circle').replace(/\%23[eE][lL][lL][iI][pP][sS][eE]/g, '#ellipse').replace(/\%23[tT][eE][xX][tT]/g, '#text').replace(/\%23[lL][iI][nN][eE]/g, '#line').replace(/\%23[pP][oO][lL][yY][lL][iI][nN][eE]/g, '#polyline').replace(/\%23[pP][oO][lL][yY][gG][oO][nN]/g, '#polygon').replace(/\%23/g, encodeURIComponent('%23'))).replace(/\%26/g,'&').replace(/\%3D/g,'=');  
          bbs[0]=bbstwo[0];
        } 
      } else if (bbstwo.length > 1) {   
        esuff+='&' + encodeURIComponent(bbstwo[1].split('&iurl=')[0].replace(/\%23[cC][iI][rR][cC][lL][eE]/g, '#circle').replace(/\%23[eE][lL][lL][iI][pP][sS][eE]/g, '#ellipse').replace(/\%23[tT][eE][xX][tT]/g, '#text').replace(/\%23[lL][iI][nN][eE]/g, '#line').replace(/\%23[pP][oO][lL][yY][lL][iI][nN][eE]/g, '#polyline').replace(/\%23[pP][oO][lL][yY][gG][oO][nN]/g, '#polygon').replace(/\%23/g, encodeURIComponent('%23'))).replace(/\%26/g,'&').replace(/\%3D/g,'=');  
        bbs[0]=bbstwo[0];
      } 
      //alert('bbs[0]=' + bbs[0]); 
      borderis=ourpostbb(bbs[0]); 
    }
    if (borderis != '') { emojiy='emoji=' + encodeURIComponent(borderis); }  
    if (emojiy != '') {
    if (document.URL.indexOf('?') == -1) { 
     location.href=document.URL.split('#')[0] + '?' + emojiy + esuff;
    } else {
     location.href=document.URL.split('#')[0].replace(/emoji\=/g, 'emojTi=') + '&' + emojiy + esuff;
    }
    } else if (esuff != '') {
    if (document.URL.indexOf('?') == -1) { 
     location.href=document.URL.split('#')[0] + esuff.replace('&','?');
    } else {
     location.href=document.URL.split('#')[0].replace(/emoji\=/g, 'emojTi=') + esuff;
    }
    }
}
     
 function ourpostbb(inp) {
   if (inp != '' && inp.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').replace(/\&/g,'').replace(/\#/g,'').replace(/\;/g,'').replace(/\,/g,'') != '') {
     return inp;
   } else if (inp != '' && inp.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').replace(/\,/g,'') == '') {
     if (eval('' + inp.split(',').length) >= 4) {
       eval('inp=String.fromCodePoint(' + inp + ')');
     }
     return inp;
   } else if (inp != '' && inp.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').replace(/\&/g,'').replace(/\#/g,'').replace(/\;/g,'') == '') {
     var outp=inp.replace(/\&\#/g,',').replace(/\;/g,',');
     outp=outp.trim(',');
     outp=outp.replace(/\,\,\,\,/g,',');
     outp=outp.replace(/\,\,\,/g,',');
     outp=outp.replace(/\,\,/g,',');
     outp=outp.trim(',');
     outp=('~' + outp + '~').replace('~,','').replace(',~','').replace(/\~/g,'');
     if (eval('' + outp.split(',').length) >= 4) {
       eval('outp=String.fromCodePoint(' + outp + ')');
     }
     return outp;
   }
   //alert(String.fromHtmlEntities(inp));
   //alert(inp.toHtmlEntities());
   return inp;
 }
 
 function ourencodeURIComponent(invi) {
   if (document.getElementById('emoji')) {
   return encodeURIComponent(invi) + '&emoji=' + encodeURIComponent(document.getElementById('emoji').value);
   }
   return encodeURIComponent(invi);
 }
 
 function emailit() {
  // alert('email ' + svgs[0].outerHTML);
  var fbit='';
  var tois=prompt('Please enter an email address to email to (all lowercase uses Inline HTML PHP Mail Email and mix tries HTML Attachment PHP Mail Email and all uppercase uses email client webpage link and all numerical sends an SMS).','');
  if (tois == null) { tois=''; }
  if (tois.trim() != '') {
  if (tois.indexOf('@') != -1) {
  if (tois.toUpperCase() == tois) {
  document.getElementById('divemail').innerHTML='<a id=aemail style=display:none; href=mailto:' + tois + '?subject=My%20Emoji%20Border%20and%20Background%20Creation&body=' + encodeURIComponent(document.URL) + '>Email</a>';
  //fbit=('' + document.getElementById('aemail').href).split('?')[1];
  //document.getElementById('aemail').href='mailto:' + tois + '?' + fbit;
  document.getElementById('aemail').click();
  } else {
  var zhr = new XMLHttpRequest();
  var zform=new FormData();
  zform.append('to', tois);
  zform.append('subj', 'Emoji Borders and Background Creation at [date]');
  //alert(encodeURIComponent('<html><body><img src=\"<?php echo $bemb; ?>\"></img></body></html>'));
  if (tois.toLowerCase() == tois) { 
  zform.append('inline', ''); 
  zform.append('tdhuhta', encodeURIComponent('<html><head><meta charset="utf-8"/></head><body><img src="' + canvas.toDataURL('data/jpeg', 10) + '"></img></body></html>'));
  } else if (1 == 1) {
  zform.append('tdhuhta', encodeURIComponent('<html><head><meta charset="utf-8"/></head><body><img src="' + canvas.toDataURL('data/jpeg', 10) + '"></img></body></html>'));
  } else {
  zform.append('tdhuhta', encodeURIComponent('<html>' + '<?php echo $headstyle; ?>' + '<body><img src="<?php echo $bemb; ?>"></img></body></html>'));
  }
  zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
  zhr.send(zform);
  alert('Email sent to ' + tois);
  }
  } else if (tois.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
  document.getElementById('divsms').innerHTML='<a id=asms style=display:none; href=sms:' + tois + '&body=' + encodeURIComponent(document.URL) + '>SMS</a>';
  //document.getElementById('asms').href='sms:' + tois + '&body=' + encodeURIComponent(document.URL);
  document.getElementById('asms').click();
  }
  }
 }
 
</script>
<style>
svg, img, canvas {
  display: block;
}

#xbody {
  <?php echo str_replace("background-repeat:no-repeat; background-size:contain; background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('');","","background-repeat:no-repeat; background-size:contain; background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('" . backg('') . "');"); ?>
 }
</style>
</head>
<body id=xbody onload='setTimeout(onl,2000);'>
<h1>Emoji Borders and Backgrounds in Canvas</h1>
<h3>RJM Programming <a onclick=eask(); style='cursor:pointer;text-decoration:underline;' title=Emoji>-</a> January, 2022</h3>
<h4>Thanks to <a target=_blank href='https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas' title='html - Drawing an SVG file on a HTML5 canvas - Stack Overflow'>html - Drawing an SVG file on a HTML5 canvas - Stack Overflow</a></h4>

<details id=detsvg><summary style='background-color:rgba(255,0,0,0.3);'>SVG <span style='cursor:pointer;' onclick=emailit(''); id=semail title='Email or SMS'>&#128231;</span></summary>
<?php
 //$mb=maybedef('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC');
 if (strpos($mb, "</svg>") !== false) {
 echo '<svg' . explode('<svg', explode('</svg>', $mb)[0])[1] . '</svg>';
 } else if (str_replace("'","",$mb) != '') {
 echo '<svg height="' . $h . '" width="' . $w . '"><rect width="' . $w . '" height="' . $h . '" style="fill:rgb(255,0,255);" /><image xlink:href="' . $mb . '" height="' . $h . 'px" width="' . $w . 'px" x="10" y="10"></image></svg>';
 }
 //echo '<br/>';
?>
</details>
<br/>

<details id=detimg><summary style='background-color:rgba(255,215,0,0.3) ;'>Image</summary>
<img/>
</details>
<br/>
   
<details id=detcvs open><summary style='background-color:rgba(0,255,0,0.3);'>Canvas</summary>
<canvas></canvas>
</details>
<br/>

<div id=gstyle></div>
<div id=divemail style='display:none;'><a id=aemail style='display:none;' href='mailto:?subject=My%20Emoji%20Border%20and%20Background%20Creation&body='>Email</a></div>
<div id=divsms style='display:none;'><a id=asms style='display:none;' href='sms:&body='>SMS</a></div>
</body>
</html>

