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

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

下面是一些代码，可用于：

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

在我来说，我其实使用库名为爱可信，但我已经使用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

来源

2017-07-12 Rupert

请张贴您的code.What你的意思是由原始数据？ –

最简单的答案可能是base64对它进行编码，并将其用作'img'标签上的'src'，但这取决于数据和API。 https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html –

下载它作为“斑点”转换团块为URL。然后将其指定为图像元素的来源。

用于将Blob转换为URL的API是createObjectUrl。

如果你的Ajax库不干净的斑点处理（例如，fetch给你response.blob()），创建一个使用new Blob([data], "image/jpeg")或等效的原始字节。

来源

2017-07-12 07:58:09

你是什么意思_“下载它作为一个”“blob”“_？'jQuery.ajax（） '默认情况下不支持二进制数据响应，OP显然没有意识到。有一个实现二进制数据结果的要点https://gist.github.com/SaneMethod/7548768;请参阅https://stackoverflow.com/questions/42106584/displays-pdf-from-arraybuffer/42195304＃42195304。 – guest271314

这实际上可以帮助我，因为我使用的是axios，它们似乎支持blob：https：//github.com/mzabriskie/axios/blob/master/README。 MD＃请求配置 – Rupert

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

回答

相关问题