从画布发送图像，并等待AJAX​​ POST响应 [英] Send image from canvas, and wait for AJAX POST response

问题描述

我正在通过ajax将画布的内容发送到我的API端点，并且我希望能够等待响应的到来，然后再继续执行下一个功能.我的发送功能如下:

I am sending the content of a canvas to my API endpoint through ajax, and I would like to be able to wait for the response to come, before proceeding with the next function. My sending function looks like this:

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;
  }
}

当在 toBlob 回调中使用ajax语句时，该功能已经起作用，但是这样做以后，我无法再访问主作用域了以阻止ajax承诺.从该函数的当前版本，我认为即使设法将 fd.set('video'，blob)语句已经在初始创建范围之外的范围中设置了formData对象.

The function is already working when the ajax statement is used within the toBlob callback, but doing so I do not have access anymore to the main scope in order to block the ajax promise. From the current version of the function I think it would be enough if I managed to extract the blob argument outside the callback scope, even though I would have expected that the fd.set('video', blob) statement would have already set the formData object from the scope outside where it was initially created.

有人有更好的建议吗?在没有带回调方法的情况下，如何将画布转换为Blob?还是更好，我该如何填充外围范围的formData?

Does anyone have better suggestions? How can I convert the canvas to the blob without the method with the callback? Or better, how could I fill the formData of the outlying scope?

推荐答案

最后，我使用了受

In the end I used a promise constructor, inspired by access blob value outside of canvas.ToBlob() async function . In the following the solution I implemented:

function sendPicture(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 fd = new FormData();
      fd.set('video', blob);

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

然后在html代码中调用:

which then is called within html code:

  <script>
    $(function() {
      var htmltakebutton = document.getElementById("takebutton");
      htmltakebutton.addEventListener('click', function(ev){
        var promiseSendPicture = sendPicture(250, 250);

        promiseSendPicture
        .then(function(respPost){
          console.log(respPost);
          updateTakenPhoto();
        });
        ev.preventDefault();
      }, false);
    })()
  </script>

这篇关于从画布发送图像，并等待AJAX​​ POST响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！