angular - 面对微软返回无效图像错误

Question

当我尝试在 Typescript/Angular 中将图片从画布发送到 Microsoft 时，我收到一个错误：

“解码错误，不支持图像格式。”

但是，当我将这张图片的 base64 复制粘贴到转换器中，并将其放入 Postman 并发送请求时，它正在工作......我在 base64 和 blob 之间进行了转换，所以通常它会收到相同的图片。我不知道问题出在哪里......也许是HttpClient？这是代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html',
  styleUrls: ['./generator.component.css']
})
export class GeneratorComponent implements OnInit {

  @ViewChild('video')
    public video;

    @ViewChild('canvas')
    public canvas;
    public urlPicture: string;
    public constructor(private httpClient: HttpClient) {
    }

    public ngOnInit() { }

    // tslint:disable-next-line:use-life-cycle-interface
    public ngAfterViewInit() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                this.video.nativeElement.srcObject = stream;
                this.video.nativeElement.play();
            });
        }
    }

    public capture() {
        const ctx = this.canvas.nativeElement.getContext('2d');
        ctx.drawImage(this.video.nativeElement, 0, 0, this.video.nativeElement.width, this.video.nativeElement.height);
        const image = this.makeblob(this.canvas.nativeElement.toDataURL('image/png'));
        console.log(this.canvas.nativeElement.toDataURL('image/png'));
        this.detectFace(image.blob);
        this.detectSkinColor(image.blob);
    }
    private makeblob(dataURL) {
      const BASE64_MARKER = ';base64,';
      if (dataURL.indexOf(BASE64_MARKER) === -1) {
          // tslint:disable-next-line:no-shadowed-variable
          const parts = dataURL.split(',');
          // tslint:disable-next-line:no-shadowed-variable
          const contentType = parts[0].split(':')[1];
          // tslint:disable-next-line:no-shadowed-variable
          const raw = decodeURIComponent(parts[1]);
          return {
            rawlength: raw.length,
            blob: new Blob([raw], { type: contentType })
          };
      }
      const parts = dataURL.split(BASE64_MARKER);
      const contentType = parts[0].split(':')[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
      }
      return {
        rawlength: raw.length,
        blob: new Blob([raw], { type: contentType })
      };
    }
    private detectFace(blob) {
      const headers = new HttpHeaders({
        'Content-Type': 'application/octet-stream',
        'Ocp-Apim-Subscription-Key' : 'mykey'
      });
      // tslint:disable-next-line:max-line-length
      this.httpClient.post<any>('https://northeurope.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise', blob, {headers: headers})
      .subscribe((result) => {
        console.log(result);
      });
    }
    private detectSkinColor(blob) {
      const headers = new HttpHeaders({
        'Content-Type': 'application/octet-stream',
        'Prediction-Key' : 'mykey'
      });
      // tslint:disable-next-line:max-line-length
      this.httpClient.post<any>('https://northeurope.api.cognitive.microsoft.com/customvision/v3.0/Prediction/myprojectid/classify/iterations/Iteration1/image', blob, {headers: headers})
      .subscribe((result) => {
        console.log(result);
      });
    }
}

标签： angulartypescriptwebcammicrosoft-cognitive

Answer 1

通过使用 toBlob() 方法可以让所有事情都正常工作。这是工作的代码：

public capture() {
    const ctx = this.canvas.nativeElement.getContext('2d');
    ctx.drawImage(this.video.nativeElement, 0, 0, this.video.nativeElement.width, this.video.nativeElement.height);
    this.canvas.nativeElement.toBlob((result) => {
      this.img = result;
      console.log(this.img);
      this.detectFace(this.img);
      this.detectSkinColor(this.img);

    });
}