bugfix> javascript > 投稿

私のWebアプリは、画像を返すWeb APIサービスを呼び出します。サービスは画像のみを返します。ルーティングコードには、必要な認証コードなどを追加する関数があるため、サービスの呼び出しはほとんど変わりません。とにかく、私のポイントは、完全なURLを持っていないので、たとえそれがあったとしても、それをプレーンテキストのコードに渡したくないのです。だから私が持っているのは反応であり、その反応はイメージです。

   getThumb(filename: string) {
        return this.http.get('/Picture/' + filename).subscribe(response => {
            return response;
        });
  }

私がする必要があるのは、その画像をキャンバスに描くことです。これまでインターネットで見たものから、画像要素を作成し、その要素srcにURLを割り当て、それをキャンバスに追加したいようです。私を困惑させているのはsrcの部分です。私が見るすべてのサンプルは、ローカルファイルシステムまたは事前定義されたURLから、またはbase64文字列などから画像をロードしています。サービスからの応答として持っている画像を単にロードする方法がわかりません。私はそれを考え直していると確信しています。

これを説明するサンプルコードはありますか?

例:次のようなもの:

var img = new Image();   // Create new img element
img.src = ... ; // Set source to image

回答 1 件
  • 画像をBase64に変換できます。私の例では、 response.blob() を使用して画像をリクエストし、それをblobに変換します 。 blobになったら、 fileReader.readAsDataURL を使用します  Base64を取得します。

    const fileReader = new FileReader();
    fetch("image-resource").then((response) => {
        if(response.ok) {
            return response.blob();
        }
    }).then((blob) => { 
        fileReader.readAsDataURL(blob);
        fileReader.onloadend = () => {
            console.log(fileReader.result);
        }
    });
    
    

    参照:

    readAsDataURL

    ブロブ

あなたの答え