CODEWITHSUNDEEP
javascripttensorflowtensorflow.js
Hugh Pearse
Hugh Pearse

Reputation: 729

Rotate a jpg with tensorflow.js

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_%28test_image%29.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_%28test_image%29.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 🤷🏼‍♂️

Here is the API to rotate

https://js.tensorflow.org/api/latest/#image.rotateWithOffset

And here is the API to create a tensor4d:

https://js.tensorflow.org/api/latest/#tensor4d

Third attempt (must be float32 tensor error):

<!DOCTYPE html>
<html>
  <head>
    <title>Image Rotation with TensorFlow.js</title>
  </head>
  <body>
    <h1>Image Rotation with TensorFlow.js</h1>
    <!-- Load TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
    <!-- Load the image to be rotated -->
    <img id="my-image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" crossorigin="anonymous" alt="Original image">
    <!-- Button to trigger image rotation -->
    <button id="rotate-button">Rotate</button>
    <!-- Script to perform the rotation -->
    <script>
      // Select the image and the button
      const imageElement = document.getElementById('my-image');
      const rotateButton = document.getElementById('rotate-button');
      
      // When the button is clicked, rotate the image
      rotateButton.addEventListener('click', () => {
        // Convert the image to a tensor
        const imageTensor = tf.browser.fromPixels(imageElement);
        // Rotate the tensor by 45 degrees (in radians)
        const rotatedTensor = tf.image.rotateWithOffset(imageTensor, Math.PI / 4);
        // Convert the rotated tensor back to an image
        const rotatedImage = tf.browser.toPixels(rotatedTensor, imageElement);
        // Update the src attribute of the image element to display the rotated image
        imageElement.src = rotatedImage;
      });
    </script>
  </body>
</html>

Upvotes: 1

Views: 299

Answers (1)

Isaac Matthews
Isaac Matthews

Reputation: 26

Solution:

<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_%28test_image%29.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
        let tensor = tf.tensor4d(imageData.data, [1, originalImage.width, originalImage.height, 4]);
        tensor = tf.cast(tensor, 'float32')

        // Rotate the tensor by 90 degrees
        const rotatedTensor = tf.image.rotateWithOffset(tensor, Math.PI / 4);

        // 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>

Upvotes: 1

Related Questions