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

Is there a way to obtain HTML code within a contentEditable DIV?

Is it mandatory to employ the spread operator in the process of updating an object while using the useState hook?

Issue with Rails - AJAX window.location redirect not functioning

When refreshed using AJAX, all dataTable pages merge into a single unified page

Providing structured Express app to deliver HTML and JavaScript content

Encountered a problem while parsing an XML file using JavaScript from an external server

Change the x and y positions of several div elements as the mouse moves in JavaScript

The image upload failed: the server could not locate the requested URL

Can TypeScript be used to dynamically render elements with props?

I am frustrated because the csvtojson converter keeps replacing my file name with "undefined."

Syntax error: Your code encountered an unexpected closing curly brace

Instructions on incorporating a new variable into the ajax script using the post method

AngularJS nested menu functionality not functioning properly

Using private members to create getter and setter in TypeScript

What is the @page rule in Material-UI?

extracting and interpreting JSON information from a socket using Node.js

The $route.reload() function seems to be ineffective in Internet Explorer

Ways to disseminate arguments when dealing with an array of arrays in JavaScript

Transfer data from a Django template populated with items from a forloop using Ajax to a Django view

Retrieving JSON information stored in a JavaScript variable