wheelie33/index.html

## index.html
<html>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.2/landmark_grid.css"
    crossorigin="anonymous"
  />
  <meta charset="utf-8" />
  <link rel="icon" href="favicon.ico" />

  <script
    src="https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.4/pose.js"
    crossorigin="anonymous"
  ></script>

  <body>
    <style>
      .square-box {
        width: 33%;
        height: 0;
        padding-top: 33%;
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .landmark-grid-container {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #99999999;
      }
    </style>
    <div class="container">
      <div class="control-panel" ></div>
      <canvas class="output_canvas" width="320" height="240"></canvas>

    <script type="text/javascript"  src="pose2.js"></script>
  </body>
</html>

## pose2.js
const mpPose = window;
const options = {
  locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/pose@${mpPose.VERSION}/${file}`;
  },
};
const canvasElement = document.getElementsByClassName("output_canvas")[0];
//const imageElement = document.getElementById("image");
const canvasCtx = canvasElement.getContext("2d");

function onResults(results) {
  alert("onResults");
}

const pose = new mpPose.Pose(options);
pose.onResults(onResults);

window.onload = function () {
  var img1 = new Image();

  //drawing of the test image - img1
  img1.onload = function () {
    console.log(img1);
    pose.send({ image: img1 });
  };

  img1.src = "ManAtDesk.jpg";
};
	<html>
	<link
	rel="stylesheet"
	type="text/css"
	href="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.2/landmark_grid.css"
	crossorigin="anonymous"
	/>
	<meta charset="utf-8" />
	<link rel="icon" href="favicon.ico" />

	<script
	src="https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.4/pose.js"
	crossorigin="anonymous"
	></script>

	<body>
	<style>
	.square-box {
	width: 33%;
	height: 0;
	padding-top: 33%;
	position: absolute;
	right: 20px;
	top: 20px;
	}

	.landmark-grid-container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #99999999;
	}
	</style>
	<div class="container">
	<div class="control-panel" ></div>
	<canvas class="output_canvas" width="320" height="240"></canvas>

	<script type="text/javascript" src="pose2.js"></script>
	</body>
	</html>
	const mpPose = window;
	const options = {
	locateFile: (file) => {
	return `https://cdn.jsdelivr.net/npm/@mediapipe/pose@${mpPose.VERSION}/${file}`;
	},
	};
	const canvasElement = document.getElementsByClassName("output_canvas")[0];
	//const imageElement = document.getElementById("image");
	const canvasCtx = canvasElement.getContext("2d");

	function onResults(results) {
	alert("onResults");
	}

	const pose = new mpPose.Pose(options);
	pose.onResults(onResults);

	window.onload = function () {
	var img1 = new Image();

	//drawing of the test image - img1
	img1.onload = function () {
	console.log(img1);
	pose.send({ image: img1 });
	};

	img1.src = "ManAtDesk.jpg";
	};