<?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
 
 $inlineblock="inline-block";
 $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];
 $qrbig="http://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" . $udirname . "canvas_svg.php&choe=UTF-8";
 $psbig='curl "https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed/?url=' . str_replace('localhost:8888','www.rjmprogramming.com.au',$udirname) . 'canvas_svg.php&screenshot=true" > /tmp/pscs.xxx';
 if (isset($_GET['justtheone']) && strpos(('' . $_SERVER['QUERY_STRING']), '&') === false) {
   header('Location: ' . str_replace('http:','',$udirname . 'canvas_svg.php' . '?' . urldecode(str_replace('justtheone=','',$_GET['justtheone']))));
   exit;
 } else if (('' . $_SERVER['QUERY_STRING']) != '') {
   $qrbig="http://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" . $udirname . "canvas_svg.php?justtheone=" . urlencode($_SERVER['QUERY_STRING']) . "&choe=UTF-8";
   $psbig='curl "https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed/?url=' . str_replace('localhost:8888','www.rjmprogramming.com.au',$udirname) . 'canvas_svg.php?justtheone=' . urlencode( str_replace('howpagespeedseesme=y&','', str_replace('?howpagespeedseesme=y','',  str_replace('&howpagespeedseesme=y','',  $_SERVER['QUERY_STRING'])))   ) . '&screenshot=true" > /tmp/pscs.xxx';
 }
 
 $extis='.xxx';
 //if (file_exists('/tmp/pscs.zzz')) {  $extis='.zzz';  }
 if (strpos(('' . $_SERVER['QUERY_STRING']), 'howpagespeedseesme=') !== false) { // || file_exists('/tmp/pscs.zzz')) {
   if (file_exists('/tmp/')) {
    if (file_exists('/tmp/pscs.xxx')) {
      unlink('/tmp/pscs.xxx');
    }
   }
   exec($psbig);
   while (!file_exists('/tmp/pscs' . $extis)) {
     sleep(4);
   }
   while (filesize('/tmp/pscs' . $extis) == 0) {
     sleep(4);
   }
   $scx=file_get_contents('/tmp/pscs' . $extis);
   $scxs=explode('"screenshot":', $scx);
   if (sizeof($scxs) > 1) {
     $postscxs=explode('"data": ', $scxs[1]);
     if (sizeof($postscxs) > 1) {
       echo '<html><body><h2>How Google <a target=_blank title="Google PageSpeed Insights" href="https://pagespeed.web.dev/">PageSpeed Insights</a> Screenshots This <a status=text-decoration:underline;cursor:pointer; onclick="var element = parent.document.getElementById(' . "'xbody'" . ');  element.scrollIntoView(); ">&#11014;</a> ...</h2><img src=' . substr($postscxs[1],0,1) . explode(substr($postscxs[1],0,1), substr($postscxs[1],1))[0] . substr($postscxs[1],0,1) . '></img></body></html>';
     } else {
       echo '<html><body><h2>How Google <a target=_blank title="Google PageSpeed Insights" href="https://pagespeed.web.dev/">PageSpeed Insights</a> Screenshots This <a status=text-decoration:underline;cursor:pointer; onclick="var element = parent.document.getElementById(' . "'xbody'" . ');  element.scrollIntoView(); ">&#11014;</a> ...</h2><p>Sorry, resource exhausted.  Could try again later.</p></body></html>';
     }
   } else {
     echo '<html><body><h2>How Google <a target=_blank title="Google PageSpeed Insights" href="https://pagespeed.web.dev/">PageSpeed Insights</a> Screenshots This  <a status=text-decoration:underline;cursor:pointer; onclick="var element = parent.document.getElementById(' . "'xbody'" . ');  element.scrollIntoView(); ">&#11014;</a>  ...</h2><p>Sorry, resource exhausted.  Could try again later.</p></body></html>';
   }
   exit;
 }
 
 
 if (isset($_GET['noqrcode']) || isset($_POST['noqrcode'])) { $inlineblock='none'; }
 
 $w='40';
 $h='40';
 $poemoji='';
 $prebimg='one.jpg';
 $bimg='one.jpg';
 $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, $qrbig;
   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 prechash='', chash='';
var uoss=null;
var wois=null, woiso=false;
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';

canvases[0].title='Click me for canvas annotation editing (discrete click shapes and freeform scribbling) functionality in new window.';

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;   }
}

if (document.getElementById('gstyle')) {
  if (document.getElementById('gstyle').innerHTML.indexOf('canvas {') != -1) {
    prechash=document.getElementById('gstyle').innerHTML.split('canvas {')[1].split('}')[0];
  }
}
if (canvases[0].outerHTML.indexOf(' style="') != -1) {
  chash='#' + encodeURIComponent(prechash + canvases[0].outerHTML.split(' style="')[1].split('"')[0]);
}
//canvases[0].onclick=function() { if (!uoss) { uoss=window.open('../HTMLCSS/user_of_signature_signature.htm' + chash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); }  };
canvases[0].onclick=function() { if (!uoss) { setTimeout(monitoru,6000); uoss=window.open('../HTMLCSS/user_of_signature_signature.htm' + chash,'_blank'); } else { uoss.focus();  }  };


}

function monitoru() {
  if (uoss) {
    if (uoss.document.getElementById('topcbutton').innerHTML.indexOf(' ') != -1) {
      uoss.document.getElementById('topcbutton').innerHTML=uoss.document.getElementById('topcbutton').innerHTML.replace(' ','');
      window.focus();
    }
    setTimeout(monitoru, 6000);
  }
}

function uossc() {
  if (!uoss) { 
    setTimeout(monitoru,6000); 
    uoss=window.open('../HTMLCSS/user_of_signature_signature.htm' + chash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); 
  } else {
    uoss.focus();
  } 
}


function eask() {
    var borderblurb='Please enter comma separated HTML decimal entity(s) for Emoji Border to graphics. Can use Emoji Menu entry (eg. control-command-space for macOS, logo key + . for Windows, control+space for iOS, top left + for Android keyboard), or append &iurl=[newImageURL[%23[circle|rect|ellipse|line|polyline|polygon]]] to change base image, or &[text|image]css=[CSSstyle] to change styling, or justify text via &[ul|uc|ur|ml|[mc]|mr|bl|bc|br]text=[someText%0AsecondLine]  ' + String.fromCharCode(32) + '  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();
  }
  }
 }
 
 function woischeck() {
   if (!woiso && wois) { 
     woiso=true;
     //wois.title='Close Me to Navigate to ' + document.URL + ' to Simulate Camera App QR Code Functionality'; 
   }
   if (wois && woiso) {
     if (wois.closed) {
       wois=null;
       window.open(document.URL,'_blank','top=200,left=200,width=400,height=400');
     } else {
       //wois.title='Close Me to Navigate to ' + document.URL + ' to Simulate Camera App QR Code Functionality'; 
       setTimeout(woischeck,1000);
     }
   } else {
     setTimeout(woischeck,1000);
   }
 }
 
 function psit() {  // <div id=readyforiframe></div>
    if (document.getElementById('readyforiframe').innerHTML == '') {
    document.getElementById('readyforiframe').style.width='100%';
    document.getElementById('readyforiframe').style.height='900px';
    document.getElementById('readyforiframe').innerHTML='<iframe style="width:100%;height:900px;" src="' + (document.URL.split('#')[0] + '&howpagespeedseesme=y').replace('.php&','.php?') + '"></iframe>';
    }
    location.href='#readyforiframe';
 }
 
</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;background-color:pink;' title=Emoji>&#10134;</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='border-top-left-radius:400px;border-top-right-radius:400px;border-bottom-right-radius:400px;background-color:rgba(255,0,0,0.3);'><strong title="To right with QR Code if you close resultant window another window of this web browser address replaces it, otherwise the Camera app use of QR Codes is available to a separate and suitable mobile phone or tablet">SVG</strong> <span style='cursor:pointer;' onclick=emailit(''); id=semail title='Email or SMS'>&#128231;&nbsp;&nbsp;</span><span title='Google PageSpeed Insights webpage screenshot view of this web browser address URL' onclick='psit();'> &#128248; </span><a style='display:<?php echo $inlineblock; ?>;background-image:URL(canvas_svg.png);background-repeat:no-repeat;background-position:0px 1px;background-size:45px 45px;width:45px;height:45px;background-color:rgba(255,0,0,0.3);' target=_blank onmouseover="if (!wois) { wois=window.open('<?php echo $qrbig; ?>','_blank','top=200,left=200,width=400,height=400'); setTimeout(woischeck,1000); }" href='<?php echo $qrbig; ?>' title='QR Code'></a><p></p></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='border-bottom-left-radius:400px;border-top-left-radius:400px;border-top-right-radius:400px;border-bottom-right-radius:400px;background-color:rgba(255,215,0,0.3) ;'><strong>Image</strong></summary>
<img/>
</details>
<br/>
   
<details id=detcvs open><summary style='border-bottom-left-radius:400px;border-top-left-radius:400px;border-top-right-radius:400px;border-bottom-right-radius:400px;background-color:rgba(0,255,0,0.3);'><strong>Canvas</strong> <span style='cursor:pointer;' onclick=uossc(); title='Click me for canvas annotation editing (discrete click shapes and freeform scribbling) functionality in new window.'>&#9997;</span></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>
<div id=readyforiframe></div>
</body>
</html>

