将原始图像数据转换为 html 中可用的数据

Question

我在这里看到了一些与此类似的 post，但我无法找到有效的解决方案，因此我希望关于该主题的新对话可能会更清晰.

我正在处理 google 个地方 api，当我尝试取回图像时，我得到的似乎是原始图像数据。我不知道如何处理它以及如何使其在 html 中可用。我试过用 base64 对其进行编码，然后按照我在某些 post 上阅读的内容将其应用于图像标签，但它只显示损坏的图像。除了主要问题之外，我什至似乎没有任何方法可以验证我是否从 api 调用 until/unless 中获得了合法图像我可以在 [=29] 中正确渲染它=].

这是 api 调用的完整代码：

function makeAPICall(url) {
  return fetch(url);
}    
makeAPICall(`http://localhost:5000/places/${searchString}`)
          .then(response => {
            return response.json();
          })
          .then(data => {
            responseObject = data.results;
            renderResult(responseObject[10]);
    
            return responseObject[10];
          })
          .then(responseObject => {
            makeAPICall(`http://localhost:5000/place/image/${responseObject.photos[0].photo_reference}`)
              .then(response => {
    
                return response;
              })
              .then(photoData => {
                console.log(photoData.url);
                const encodedImg = btoa(photoData.url);
    
                bizImage.src = `data:image/jpeg;base64,${encodedImg}`;
              });
          });

试图处理图像的特定代码位：

.then(photoData => {
      console.log(photoData.url);
      const encodedImg = btoa(photoData.url);
    
      bizImage.src = `data:image/jpeg;base64,${encodedImg}`;
});

正在返回的原始数据样本（整个 blob 太大，无法包含在 post 中）：

����JFIF��*ExifII*1Google���ICC_PROFILE�mntrRGB XYZ �$acsp���-)�=ޯ�U�xB��ʃ9 descDybXYZ�bTRC�dmdd ��gXYZ hgTRC�lumi |meas �$bkpt �rXYZ �rTRC�tech �vued ��wtptpcprt�7chad�,descsRGB IEC61966-2-1 black scaledXYZ $����curv #(-27;@EJOTY^chmrw|������������������������� %+28>ELRY`gnu|����������������&/8AKT]gqz������������!-8COZfr~���������� -;HUcq~��������� +:IXgw��������'7HYj{�������+=Oat�������2FZn�������  % : O d y � � � � � �  ' = T j � � � � � �"9Qi������*C\u����� & @ Z t � � � � �.Id���� %A^z���� &Ca~����1Om����&Ed����#Cc����'Ij����4Vx���&Il����Ae����@e����

Answer 1

data:image/gif;base64,${encodedImg}

JFIF 是 JPEG 文件交换格式。

Answer 2

所以在大量阅读和研究之后，我能够更好地理解这个 API 并且意识到我在某种程度上是错误的。有一个 client-side service 的地方和地图 api 应该用于这些类型的事情，实际上 returns 可用数据。完全披露，我觉得 google 在这方面组织他们的文档的方式非常糟糕，但信息就在那里。

将原始图像数据转换为 html 中可用的数据

Convert raw image data to something usable in html

javascript

image

base64

google-places-api