Question

我有一个图像文件的API端点，它总是发送原始数据。如何在网站上显示此图像数据？理想情况下，我想使用img标签或css background-image属性而不是canvas。

以下是一些可以使用的代码：

$.get({
  url: '/some-image',
  success: function(data) {
    // Load raw image data somewhere and show it on webpage.
  },
});

在我的情况下，我实际上正在使用一个名为axios的库，但我使用了一个jquery示例，因为它虽然它更为人所知。

为了清楚我收到的数据是这样的：

����JFIF��� ( %!1!%)+...383-7(-.+ 
-------------+-------------+-+--+-----------+-----+���"����?!1AQa"q����2����R��Br�#b$4D�������%!1A2Q"Ca��?��]0`V�a����:T���E�R����$�jy$�6�GcP��Q��$�Fk,� ;D������\�e�l��(GE��[c,���w�P�&�J1rz.mM��]��!����\ �\̺I�:.�[&o=~z�7Y�'#T �_�%��u+����rg�i��p��^�����c���[E�ʔ����)E���b x�=U!M���3��6�k8��R��0&<?K�Kn���pd+'��Vt��|l�Z���i1�Pic*R79�8 b]A<�ݿ��@mw} kBjѲٸ�Tm��m�+ǖ���G�jv&��D:Ƽ$sD2zf

Answer 1

Download it as a "blob" Convert the blob into a URL. Then specify that as the source for your image element.

The API for converting a Blob into a URL is createObjectUrl.

If your ajax library does not deal cleanly with blobs (for example, fetch gives you response.blob()), create one from raw bytes using new Blob([data], "image/jpeg") or equivalent.

如何使用javascript在网络上显示原始图像数据？

1 个答案: