image styling

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<div class="container">

  <p id="intro">
    Crossorigin is preventing to properly test this.
  </p>

  <button id="button" onclick="Save()">Save</button><br>
  <div id="the_canvas_element_id"></div>

  <img class="rounded gray" id="img" src="https://via.placeholder.com/480x160" alt="Girl in a jacket">
  <table id="table">
    <tbody>
      <tr>
        <td>LANG</td>
        <td>en_US.UTF-8</td>
      </tr>
      <tr>
        <td>WORKSPACE</td>
        <td>/tmp/ee3d897c-f2f1-11ec-b887-ac1f6b91578a</td>
      </tr>
      <tr>
        <td>PWD</td>
        <td>/home/99fPiJ</td>
      </tr>
      <tr>
        <td>HOME</td>
        <td>/home/99fPiJ</td>
      </tr>
      <tr>
        <td>TMPDIR</td>
        <td>/tmp/jcJcl8</td>
      </tr>
      <tr>
        <td>TMPDIR_GLOBAL</td>
        <td>/tmp/ee3d897c-f2f1-11ec-b887-ac1f6b91578a</td>
      </tr>
      <tr>
        <td>SHLVL</td>
        <td>0</td>
      </tr>
      <tr>
        <td>PATH</td>
        <td>/usr/local/bin:/usr/bin:/bin</td>
      </tr>
      <tr>
        <td>PHP_SELF</td>
        <td>prog.php</td>
      </tr>
      <tr>
        <td>SCRIPT_NAME</td>
        <td>prog.php</td>
      </tr>
      <tr>
        <td>SCRIPT_FILENAME</td>
        <td>prog.php</td>
      </tr>
      <tr>
        <td>PATH_TRANSLATED</td>
        <td>prog.php</td>
      </tr>
      <tr>
        <td>DOCUMENT_ROOT</td>
        <td></td>
      </tr>
      <tr>
        <td>REQUEST_TIME_FLOAT</td>
        <td>1655988144.4306</td>
      </tr>
      <tr>
        <td>REQUEST_TIME</td>
        <td>1655988144</td>
      </tr>
      <tr>
       ...

CSS

html,
	body {
	  background: #F9F9F9;
	  color: #454545;
	}

	div.container {
	  background: #FFFFFF;
	  margin-top: 5%;
	  border: 1px solid #CCCCCC;
	  padding: 20px 30px;
	  box-shadow: 2px 2px 2px #454545;
	}

	table {
	  width: 100%;
	  padding: 0px;

	}

	table tr td {
	  text-shadow: 0px 0px 0px #454545;

	}

	table tr:hover {
	  background: #F9F9F9;
	}

	.rounded {
	  border-radius: 50px;
	}

	.gray {
	  filter: grayscale(100%);
	}

	canvas {
	  background: #EEEEEE;
	  border: 1px solid #CCCCCC;
	  width: 250px;
	}

JavaScript

function Save() {

  html2canvas(document.querySelector("#img")).then(canvas => {
/* IMG TAG FIX??: https://github.com/niklasvh/html2canvas/issues/722#issuecomment-757671991 */

		/*let img = new Image();
    img.src = 'https://via.placeholder.com/160x80';
    img.crossOrigin = 'Anonymous';*/

    /* document.body.appendChild(canvas) */
    document.getElementById('the_canvas_element_id').appendChild(canvas);

  });

}