<?php
// canvas_svg.php
// Emoji Borders and Backgrounds in Cnanvas
// RJM Programming
// January, 2022

 
 $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];
 
 function backg($indef) {
   global $prebimg, $bimg, $udirname, $poemoji, $w, $h;
   if (('' . $_SERVER['QUERY_STRING']) == '') { return $indef; }
   $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 (file_exists($udirnameprebimg)) {  $pjbit='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));   }
   } else if (isset($_POST['iurl'])) {
     $udirnameprebimg=str_replace('+',' ',urldecode($_POST['iurl']));
     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 (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($udirnameprebimg);
     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; }   file_put_contents('xz00110.xz00110','');  }
     if ($makeitsvg) { $pjbit=''; }
     return $prefix . file_get_contents($udirname . "../inline_svg.php?asbackground=y" . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($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" . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($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($udirnameprebimg);
     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" . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($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" . $midbit . "&noXbase64=y&ima" . $inz . "ge=" . urlencode($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($udirnameprebimg);
     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" . $midbit . "&noXbase64=y&image=" . urlencode($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" . $midbit . "&noXbase64=y&image=" . urlencode($udirnameprebimg)) . $suffix; // . "&insvg=" . str_replace('+','',urldecode($_GET['emoji']))) . '),URL(' . $indef;
     }
   } else if ($indef != '' && $prebimg != '') {
     //file_put_contents('xz1.xz1','');
     list($wdt, $hgt) = getimagesize($udirnameprebimg);
     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>
<script type='text/javascript'>
// Thanks to https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

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');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

var 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"));

//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 != '' && emoji != '') {
  imgs[0].style.background='URL("' + iurl + '")';
  canvases[0].style.background='URL("' + 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";
 }
?>
}


function eask() {
    var borderblurb='Please enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. 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] to change base image.';
    var borderis=prompt(borderblurb, '');
    var emojiy='';
    var esuff='';
    if (borderis == null) { borderis=''; } else { var bbs=borderis.split('&iurl='); if (bbs.length > 1) { esuff='&iurl=' + encodeURIComponent(bbs[1]); }  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);
 }
 
</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</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/>

</body>
</html>

