Как отправить toDataURL 'image / png' Object используя http post?

Question

Я получил изображение с локальной камеры, используя HTMLCanvasElement.toDataURL('image/png'). Теперь я хочу отправить изображение на свой внутренний сервер (Express / Node.js). Я попытался добавить изображение к FormData() объекту и отправить по http post, но это не работает. (Я проверил, что вызов http post работает, когда я добавляю объект File к FormData и затем отправляю. Я также проверил, что захват изображения работает правильно). Какие-нибудь указатели относительно того, как я должен продолжить отправлять изображение через http post? (Примечание: я видел, что есть HTMLCanvas​Element​.moz​GetAsFile() метод https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/mozGetAsFile,, но в документации MDN говорится, что этот метод не рекомендуется для производственного использования).

Фронтальный захват изображения (Угловой capture-image.component.ts)

  takePicture() {
    let context: CanvasRenderingContext2D  = this.canvasRef.nativeElement.getContext('2d');

    if (this.width && this.height) {
      this.canvasRef.nativeElement.width = this.width;
      this.canvasRef.nativeElement.height = this.height;
      context.drawImage(this.videoRef.nativeElement, 0, 0, this.width, this.height);

      let data = this.canvasRef.nativeElement.toDataURL('image/png');
      this.photoRef.nativeElement.src = data;

      let fd = new FormData();
      fd.append('image', data);
      try {
          this.http.post("http://localhost:3000/selection/test-photo",fd)
          .subscribe(
            (res) => {
              console.log("Successful result: " + JSON.stringify(res))},
            (err) => {
              console.log("Subscribe error: " + JSON.stringify(err))} 
        );
      }
      catch(e) {
        console.log("Caught error: " + e);
      }
    } else {
      this.clearPhoto();
    }
  }

Бэкэнд-функция (экспресс)

exports.selection_test_photo = [
    (req,res,next) => {
        const photo = new Photo();
        photo.photo.data = fs.readFileSync(req.file.path);
        photo.photo.contentType = 'image/png';
        photo.save(function(err){
            if (err) {return next(err)};
            res.json({"foo": "bar"});
        });        
    },

];

Answer 1

Используйте метод toBlob вместе с методом append , который принимает имя файла,

      this.canvasRef.nativeElement.toBlob(blob => {
        this.photoRef.nativeElement.src = URL.createObjectURL(blob);

        let fd = new FormData();
        fd.append('image', blob, "filename");
        this.http.post("http://localhost:3000/selection/test-photo",fd)
          .subscribe(
            (res) => {
              console.log("Successful result: " + JSON.stringify(res))},
            (err) => {
              console.log("Subscribe error: " + JSON.stringify(err))} 
        );
      },'image/png');