Transmit the canvas image and anticipate the AJAX POST response

Question

Transmit the canvas image and anticipate the AJAX POST response

I need to send canvas content to my API endpoint using ajax and wait for the response before moving on to the next function. Here is my current sending function:

function sendPicture(){
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');

  var context = canvas.getContext('2d');
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    var fd = new FormData();
    fd.append('video', null);

    var reso;
    canvas.toBlob(function(blob){
        fd.set('video', blob);
    }, 'image/jpeg');

    reso = $.ajax({
      url: "/img",
      type : "POST",
      processData: false,
      contentType: false,
      data : fd,
      dataType: "text",
    });

    return reso;
  }
}

The ajax statement works within the toBlob callback, but I lose access to the main scope. I'd like to find a way to block the ajax promise outside of the callback. Perhaps extracting the blob argument from the callback scope or ensuring that fd.set('video', blob) sets the formData object outside where it was initially created would help.

Any suggestions on how to convert the canvas to a blob without using the callback method? Or any ideas on how to fill the formData in the outer scope?

javascript ajax

Answer 1

Answer №1

There is a method to obtain the width and height, though it may be confusing at first glance. The key is to create a function outside of the callback and then invoke it within the callback. This allows you to access the data from both inside and outside of the callback.

function sendPicture(){
     var video = document.getElementById('video');
     var canvas = document.getElementById('canvas');

     var context = canvas.getContext('2d');
     if (width && height) {
       canvas.width = width;
       canvas.height = height;
       context.drawImage(video, 0, 0, width, height);
     }

     var fd = new FormData();
     fd.append('video', null);

     var setBlobOutside = function(blob){
       fd.set('video', blob);
     }
     
     var reso;
     canvas.toBlob(function(blob){
         setBlobOutside(blob);
     }, 'image/jpeg');

     reso = $.ajax({
       url: "/img",
       type: "POST",
       processData: false,
       contentType: false,
       data: fd,
       dataType: "text",
     });

     return reso;
}

Your var fd = new FormData(); is empty because it is not receiving any data or having anything appended to it. You can rectify this by using fd.append('key1', 'value1'); or new FormData([data]);

Below is an example demonstrating how to asynchronously send form data with a file:

<form id="formElem">
  <input type="text" name="firstName" value="John">
  Picture: <input type="file" name="picture" accept="image/*">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>

Answer 2

There is a method to obtain the width and height, though it may be confusing at first glance. The key is to create a function outside of the callback and then invoke it within the callback. This allows you to access the data from both inside and outside of the callback.

function sendPicture(){
     var video = document.getElementById('video');
     var canvas = document.getElementById('canvas');

     var context = canvas.getContext('2d');
     if (width && height) {
       canvas.width = width;
       canvas.height = height;
       context.drawImage(video, 0, 0, width, height);
     }

     var fd = new FormData();
     fd.append('video', null);

     var setBlobOutside = function(blob){
       fd.set('video', blob);
     }
     
     var reso;
     canvas.toBlob(function(blob){
         setBlobOutside(blob);
     }, 'image/jpeg');

     reso = $.ajax({
       url: "/img",
       type: "POST",
       processData: false,
       contentType: false,
       data: fd,
       dataType: "text",
     });

     return reso;
}

Your var fd = new FormData(); is empty because it is not receiving any data or having anything appended to it. You can rectify this by using fd.append('key1', 'value1'); or new FormData([data]);

Below is an example demonstrating how to asynchronously send form data with a file:

<form id="formElem">
  <input type="text" name="firstName" value="John">
  Picture: <input type="file" name="picture" accept="image/*">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>

Answer 3

Answer №2

After finding inspiration in a discussion on how to access blob value outside of the canvas.ToBlob() async function, I opted to utilize a promise constructor for my project. Here is the code snippet showcasing the solution:

function uploadImage(width, height){
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');

  var context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  context.drawImage(video, 0, 0, width, height);

  return new Promise(function(resolve, reject) {
    canvas.toBlob(function(blob) {
      var formData = new FormData();
      formData.set('image', blob);

      $.ajax({
        url: "/img/upload",
        type : "POST",
        processData: false,
        contentType: false,
        data : formData,
        dataType: "text",
      })
      .done(function(response) {
        resolve(response)
      })
      .fail(function(error) {
        console.log(error);
      });
    })
  })
}

This function can be called within an HTML script like so:

  <script>
    $(function() {
      var captureButton = document.getElementById("captureBtn");
      captureButton.addEventListener('click', function(event){
        var imageUploadPromise = uploadImage(300, 200);

        imageUploadPromise
        .then(function(response){
          console.log(response);
          displayUploadedPhoto();
        });
        event.preventDefault();
      }, false);
    })()
  </script>

Answer 4

After finding inspiration in a discussion on how to access blob value outside of the canvas.ToBlob() async function, I opted to utilize a promise constructor for my project. Here is the code snippet showcasing the solution:

function uploadImage(width, height){
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');

  var context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  context.drawImage(video, 0, 0, width, height);

  return new Promise(function(resolve, reject) {
    canvas.toBlob(function(blob) {
      var formData = new FormData();
      formData.set('image', blob);

      $.ajax({
        url: "/img/upload",
        type : "POST",
        processData: false,
        contentType: false,
        data : formData,
        dataType: "text",
      })
      .done(function(response) {
        resolve(response)
      })
      .fail(function(error) {
        console.log(error);
      });
    })
  })
}

This function can be called within an HTML script like so:

  <script>
    $(function() {
      var captureButton = document.getElementById("captureBtn");
      captureButton.addEventListener('click', function(event){
        var imageUploadPromise = uploadImage(300, 200);

        imageUploadPromise
        .then(function(response){
          console.log(response);
          displayUploadedPhoto();
        });
        event.preventDefault();
      }, false);
    })()
  </script>

Transmit the canvas image and anticipate the AJAX POST response

Answer №1

Answer №2

Similar questions

Array filtering functions similarly to marketplace filtering tools

I encountered an ERR_CONNECTION_REFUSED issue after deploying my Node.js application with Socket.io to Heroku

What is the best way to stop the browser from automatically redirecting to another page after submitting a form?

After removing an element from an array in Vue.js, how can we adjust its class to reflect the change?

Implementing dynamic loading with a Vue component loader

I'm having trouble getting onClick to function properly in CodeIgniter

Verify if any choices are available before displaying the div block

Unable to direct to the main page in index.js of the next.js application

Stencil - React Integration Does Not Support Global CSS Styling

Generate tables and rows dynamically

I'm having trouble with my react-big-calendar not updating when I switch between day, month, or week views -

What is the best way to define properties for objects within views.py so that the updated object can be effectively passed to JavaScript code?

Tips for triggering window load event on a particular page

Choose a specific parameter from a line using the body parser in Node.js

Using jQuery to trigger alert only once variable has been updated

Increase or decrease the quantity of items by cloning with Jquery and dynamically changing the ID

Are you experiencing issues with the map displaying inaccurate latitude and longitude when clicking on a specific point?

Triggering a JavaScript function when a page is focused due to user interaction

Displaying JSON data based on a specific key

Struggling to display a navigation menu on angular 1 with complex nested json structure