Javascript: передача созданного изображения через ajax.

Question

Итак, я создал изображение, используя холст.И я хочу передать изображение с помощью ajax.Я знаю, как это сделать, используя форму, но на этот раз я ее не использую.Это мой код для создания изображения.

      var video = document.querySelector('video')
      , canvas;

      var img = document.querySelector('img') || document.createElement('img');
      var context;
      var width = video.offsetWidth
        , height = video.offsetHeight;

      canvas = canvas || document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

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

      img.src = canvas.toDataURL('image/png');
      document.body.appendChild(img);

переменная "img" - это мое созданное изображение.Это мой код передачи изображения с использованием ajax

var form = $('#fileUploadForm')[0];
      var data = new FormData(form);

      $.ajax({
          type: "POST",
          enctype: 'multipart/form-data',
          url: "/api/file/upload",
          data: data,
          processData: false, //prevent jQuery from automatically transforming the data into a query string
          contentType: false,
          cache: false,
          success: (data) => {
              $("#listFiles").text(data);
          },
          error: (e) => {
              $("#listFiles").text(e.responseText);
          }
      });

. Я пробовал другие уроки, создавая новые FormData, но, похоже, это не работает.Я также попытался присвоить значение типу входного файла. Но это не работает, и другие не рекомендуют его из-за будущих проблем безопасности.Надеюсь, ты сможешь мне помочь.