SAP B1, ItemImage에서 가져온 이미지를 표시하는 방법?

10

SAP B1 Service Layer에서 이미지를 가져오고 있습니다. 우편 배달부에서, 나는 그것을 볼 수 있습니다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 : '확인',

헤더 :
{ 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 \ u0000Adobe ImageReadyq 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

Server-Side에서 사용자 정의 기능을 만들어야하므로 ComponentDidMount에서 직접 가져올 수 없으며 클라우드 기능을 통해 수행하고 있습니다.

— Dhaval Jardosh

1

클라이언트 측에서 가져올 수 없습니다 .React에서 할 때 잘못된 헤더가 페치 / 액시 오스로 전달되었다고 말합니다.

— Dhaval Jardosh

3

다음은 내가 온 작업 솔루션에 가장 가까운 것입니다. 기본적으로 내가 시도한 것은 이미지를 가져 와서 클라이언트의 블로 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

내 편에서 작은 감사 :)

— 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]"/>

— 다발 자르도 쉬
소스