Rotate a jpg with tensorflow.js-CodePudding

I am trying to learn tensorflow.js. As a simple test of the API I am trying to perform a basic transformation by rotating an image. Then I will move on to more complex transformations in tensorflow.js

I have written a few versions to rotate an image but haven't had any success.

Here is the first attempt (imageElement.getcontext is not a function error):

<!DOCTYPE html>
<html>
  <head>
    <title>Image Tensor Conversion with TensorFlow.js</title>
    <!-- Load TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
  </head>
  <body>
    <h1>Image Tensor Conversion with TensorFlow.js</h1>
    <!-- Load the image to be converted -->
    <img id="my-image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_(test_image).png" crossorigin="anonymous" alt="My Image">
    <!-- Button to trigger tensor conversion -->
    <button id="convert-button">Convert to Tensor</button>
    <!-- Script to perform the conversion -->
    <script>
      // Select the image and the button
      const imageElement = document.getElementById('my-image');
      const convertButton = document.getElementById('convert-button');
      
      // When the button is clicked, convert the image to a tensor
      convertButton.addEventListener('click', () => {
        // Get the image data
        const imageData = imageElement.getContext('2d').getImageData(0, 0, imageElement.width, imageElement.height);
        // Convert the image data to a 4D tensor
        const imageTensor = tf.tensor4d(imageData.data, [1, imageElement.height, imageElement.width, 4]);
        // You can now use the imageTensor variable to perform operations on the tensor
      });
    </script>
  </body>
</html>

Second attempt (working without tensorflow.js API call):

<html>
  <head>
    <title>Image Rotation with TensorFlow.js</title>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
  </head>
  <body>
    <!-- Display the original image -->
    <h1>Original Image</h1>
    <img id="original-image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_(test_image).png" crossorigin="anonymous" alt="Original image">

    <!-- Display the rotated image -->
    <h1>Rotated Image</h1>
    <canvas id="rotated-image"></canvas>

    <script>
      // Load the original image
      const originalImage = document.getElementById('original-image');

      // Wait for the image to load
      originalImage.onload = async () => {
        // Get the canvas element
        const canvas = document.getElementById('rotated-image');
        const ctx = canvas.getContext('2d');

        // Set the canvas size to the size of the original image
        canvas.width = originalImage.width;
        canvas.height = originalImage.height;

        // Draw the original image on the canvas
        ctx.drawImage(originalImage, 0, 0);

        // Get the image data from the canvas
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        // Convert the image data to a tensor
        const tensor = tf.tensor(imageData.data, [canvas.height, canvas.width, 4]);

        // Rotate the tensor by 90 degrees
        const rotatedTensor = tensor.transpose([1, 0, 2]);

        // Convert the rotated tensor back to image data
        const rotatedData = await rotatedTensor.data();

        // Update the image data on the canvas
        imageData.data.set(rotatedData);
        ctx.putImageData(imageData, 0, 0);
      };
    </script>
  </body>
</html>

Any help is appreciated. I have a feeling I need to use a 4d tensor, but I don't know how and don't understand why