JSFiddle - React, Tailwind, and code Playground

by RomainMazB

HTML

<html>
  <body>
    <div id="SVGContainer" height="500" class="container-fluid p-0 m-0" style="border: 1px solid red;"><svg id="SVGRender" width="1518" height="498"><line x1="75.9" y1="249" x2="1442.1" y2="249" class="midScoreLine"></line><line x1="75.9" y1="24.9" x2="1442.1" y2="24.9" class="dashedLine"></line><text x="37.95" y="24.9" class="ordinateText" id="text41" text-anchor="middle">41</text><line x1="75.9" y1="82.52571428571429" x2="1442.1" y2="82.52571428571429" class="dashedLine"></line><text x="37.95" y="82.52571428571429" class="ordinateText" id="text32" text-anchor="middle">32</text><line x1="75.9" y1="140.15142857142857" x2="1442.1" y2="140.15142857142857" class="dashedLine"></line><text x="37.95" y="140.15142857142857" class="ordinateText" id="text23" text-anchor="middle">23</text><line x1="75.9" y1="197.77714285714288" x2="1442.1" y2="197.77714285714288" class="dashedLine"></line><text x="37.95" y="197.77714285714288" class="ordinateText" id="text13.999999999999996" text-anchor="middle">13</text><line x1="75.9" y1="255.40285714285716" x2="1442.1" y2="255.40285714285716" class="dashedLine"></line><text x="37.95" y="255.40285714285716" class="ordinateText" id="text4.999999999999997" text-anchor="middle">4</text><line x1="75.9" y1="313.0285714285714" x2="1442.1" y2="313.0285714285714" class="dashedLine"></line><text x="37.95" y="313.0285714285714" class="ordinateText" id="text3.9999999999999964" text-anchor="middle">3</text><line x1="75.9" y1="370.6542857142857" x2="1442.1" y2="370.6542857142857" class="dashedLine"></line><text x="37.95" y="370.6542857142857" class="ordinateText" id="text13" text-anchor="middle">13</text><line x1="75.9" y1="428.28" x2="1442.1" y2="428.28" class="dashedLine"></line><text x="37.95" y="428.28" class="ordinateText" id="text21.999999999999996" text-anchor="middle">21</text><rect x="75.9" y="31.302855899775977" width="81.32142857142857" height="217.69714410022402" id="score-l-125Hz" class="leftEarScore"...

JavaScript

var canvas = $("#SVGContainer")[0];
var string= canvas.toDataURL("image/png");
base64=string.replace("data:image/png;base64,", "");
var rid = kRid || "";
var fileN = " Product " + rid + ".png";
var req = "";
req += "<qdbapi>";
req += "<field fid='323' filename='" + fileN + "'>" + base64 + "</field>";
req += "</qdbapi>";
$.ajax({
  type: "POST",
  contentType: "text/xml",
  dataType: "xml",
  processData: false,
  //url altered 
  url: "/echo/html/,
  data: req,
  success: function(responce) {
    //auto reload page
    var str = window.location.href;
    setTimeout(function() {
      window.location.href = str;
    }, 5000);
  }
})