SAP B1、ItemImageから取得した画像を表示する方法

10

SAP B1サービスレイヤーからイメージをフェッチしています。郵便配達員では、と表示できますimage/pngが、表示に問題があります。

それを表示する正しい方法は<img />何ですか？

require(fetchedImage) -機能しません

画像を取得してクライアントに渡すCloud Functionを作成しましたが、その方法がわかりません。

このような超奇妙なオブジェクトを持っている

 data:
>     '�PNGörönöu001aönöu0000öu0000öu0000örIHDRöu0000öu.........

それを経由して渡す方法がわからないres.send(IMAGE IN PNG)ので、クライアント側で画像を取得できます。

チェックbase64変換が、私はそれらを使用するかどうかはわかりません。

更新

郵便配達員のリクエスト：（これは正常に機能しています）

GET：https : //su05.consensusintl.net/b1s/v1/ItemImages（ 'test'）/ $ value

ヘッダ：のSessionId：あなたがしようとしたときに確認します

何らかの理由で、フロントエンドで直接画像を取得できず、ミドルウェアを作成する必要があるので、 Firebase Cloud Function

だからここに画像を取得し、それを渡す方法がわからない関数があります。

Firebase Cloud Functionの関数は次のとおりです。

if (!req.body.productId) {
      res.status(400).send({ error: "productId is required" });
      return;
    }

    console.log("Starting the process");

    const productId = req.body.productId;

    const login = await Auth.login();
    const fetchedImg = await ItemMaster.getImage(login["SessionId"], productId);

    //Here in the fetchedImg, we're getting some data like
    res
      .status(200)
      .set("Content-Type", "image/png")
      .send(fetchedImg);

そして、次のような応答が得られます。

{ステータス：200、

statusText： 'OK'、

ヘッダー：
{ server: 'nginx',

  date: 'Wed, 22 Jan 2020 03:52:22 GMT',

  'content-type': 'image/png',

  'transfer-encoding': 'chunked',

  connection: 'close',

  dataserviceversion: '3.0',

  'content-disposition': 'inline; filename="rr-96600.png"',

  vary: 'Accept-Encoding',

  'set-cookie': [ 'ROUTEID=.node2; path=/b1s' ] },
設定：
{ url:
データ：

' PNG\ r \ n \ u001a \ n \ u0000 \ u0000 \ u0000 \ rIHDR \ u0000 \ u0000 \u0000 \ u0000 \ u0000 \u0000 \ b \ u0002 \ u0000 \ u0000 \ u0000 \ u0006 \u001fS \ u0000 \ u0000 \ u0000 \ u0019tEXtSoftware \ u0000AdobeImageReadyq e<\ u0000 \ u0000 \ u0003hiTXtXML：com.adobe.xmp \ u0000 \ u0000 \ u0000 \ u0000 \ u0000

これは非常に長く、80から100行追加されます

テストする場合は、以下を使用できます。

郵便配達：

POST：https : //us-central1-rapid-replacement.cloudfunctions.net/getImageFromItems

本文：{"productId"： "test"}

有効なproductIdは次のとおりです：1. "RR000102" 2. "test" 3. "RR000101"

— ダヴァル・ジャルドシュ
ソース

1

あなたはバックエンドのコンテンツタイプ設定しているres.set({'Content-Type': 'image/png'});

— C.Gochev

1

はい私も試しました、それは壊れたイメージを与えます。

— Dhaval Jardosh

1

それらをどこかに保存しますか？

— C.Gochev

1

いいえ、そうではありません。それなしでそれを実行する方法はありますか？

— Dhaval Jardosh

1

あなたはそれを直接const request = require('request')そしてルートでプロキシすることができますrequest.get(url).pipe(res);

— C.Gochev

4

イメージを動的に使用する場合は、コンポーネントがマウントされたらすぐにイメージをフェッチし、後で挿入する必要があります。フェッチされた画像はコンポーネントの状態で保存され、そこからimgタグのsrc属性に含まれます。すでに画像を取得できると仮定すると、以下のコードが機能するはずです。

import React, { Component } from "react";

export default class ComponentWithFetchedImage extends Component {
  constructor() {
    super();
    this.state = { image: undefined };   
  }

  componentDidMount() {
    let fetch_url = "https://picsum.photos/200";   // Insert your fetch url here
    fetch(fetch_url)
      .then(res => res.blob())
      .then(blob => URL.createObjectURL(blob))
      .then(url => this.setState({ image: url }))
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="component">
        <img src={this.state.image} alt="" />
      </div>
    );   
  }
}

— タリック
ソース

1

サーバーサイドでカスタム関数を作成する必要があるため、ComponentDidMountで直接フェッチすることはできません。そのために、クラウド関数を介して実行しています。

— Dhaval Jardosh

1

それは私がクライアント側でフェッチすることを許可していません、それは私がReactからそれをするとき、フェッチ/ axiosで渡された違法なヘッダーを言っています。

— Dhaval Jardosh

3

これが私がやってきた実用的な解決策に最も近いものです。基本的に私が試したのは、画像をフェッチしてからクライアントのblobに変換して、objectURLそれを。 src

サーバーコード：

const http = require('http')
const axios = require('axios')
const fs = require('fs')
const stream = require('stream')
const server = http.createServer(function(req, res) {
  if (req.url === '/') {


    res.setHeader("Access-Control-Allow-Origin", "*");
    axios.post(
      "https://su05.consensusintl.net/b1s/v1/ItemImages('test')/$value", {
        responseType: "blob"
      }).then(function(resp) {
      console.log(resp.data)
      const buf_stream = new stream.PassThrough()
      buf_stream.end(Buffer.from(resp.data))
      buf_stream.pipe(res.end())
    }).catch(err => console.log(err))
  }
})


server.listen(3500)

クライアントコード：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <img style="width:200px; height:200px" />
  <script>

  const img = document.getElementsByTagName("IMG")
  fetch('http://localhost:3500').then(function(response) {
    console.log(response)
    return response.body
  }).then(function(data) {
    console.log(data)
    const reader = data.getReader()
     return new ReadableStream({
    start(controller) {
      return pump();
      function pump() {
        return reader.read().then(({ done, value }) => {
          // When no more data needs to be consumed, close the stream
          if (done) {
              controller.close();
              return;
          }
          // Enqueue the next data chunk into our target stream
          controller.enqueue(value);
          return pump();
        });
      }
    }
  })
})
  .then(stream => new Response(stream))
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => img[0].src = url)
  .catch(err => console.error(err));
    </script>
</body>

</html>

— C.ゴシェフ
ソース

ここGET : https://su05.consensusintl.net/b1s/v1/ItemImages('test')/$valueで画像を取得しましたが、同じことを渡すと機能しません。あなたがより良いアイデアを得たら、私に知らせてください。

— Dhaval Jardosh

私の側からの小さな感謝:)

— ダヴァルジャルドシュ

更新されたコードを参照してください。これが私の最後の試みでした。解決策を見つけてください。

— C.Gochev

0

この問題は解決されました。

const getImage = async (sessionId, ItemCode) => {
  console.log("fetching image");
  let result = {};

  result = await axios.get(
    `${settings.url}${endpoints.ItemImages}('${ItemCode}')/$value`,
    { 
      headers: {Cookie: `B1SESSION=${sessionId}`},
      responseType: "arraybuffer" } 
    ).then(response => Buffer.from(response.data, 'binary').toString('base64'));

  //Here we're returning base64 value of Image
  return result;
};

だから私たちはクライアント側で画像を見ることができます

<img src="data:image/png;base64,[BASE64-VALUE-HERE]"/>

— ダヴァル・ジャルドシュ
ソース