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

标签 javascript html css image

我有一个图像文件的 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

最佳答案

将其下载为“blob” 将 blob 转换为 URL。然后将其指定为图像元素的来源。

将 Blob 转换为 URL 的 API 是 createObjectUrl .

如果您的 ajax 库不能干净地处理 blob(例如,fetch 给您 response.blob()),请使用 从原始字节创建一个new Blob([data], "image/jpeg") 或等价物。

关于javascript - 如何使用 javascript 在网络上显示原始图像数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45051536/

相关文章:

javascript - 无法使用 Passport 登录 - Nodejs

javascript - jQuery 数组排序仅适用于 DOM 中的第一个表元素

javascript - Firebase 中的更新删除其他条目

javascript - document.getElementsByClassName ('name' ) 的长度为 0

html - 如何使用固定顶部解决错误设置侧边栏

android - 背景图像覆盖太大

javascript - 如何通过JQuery/Javascript优化列表框绑定(bind)C#代码?

javascript - 显示随机 div 的框

css - mod_pagespeed 正在重写但不合并

javascript - 打开模态,然后在不重定向的情况下更改 url