首页 > javascript如何通过服务器给到的字节码字符串,显示一张图片?

javascript如何通过服务器给到的字节码字符串,显示一张图片?

(先请大家不要抨击这种设计如何,请各位正面回答问题,感激不尽!)
服务器保存的是图片的二进制字符数组(varchar),如何在浏览器上面显示?
按照我的理解:
首先获取到字符串之后应该转换成字节数组,字符转字节的方式是怎样的。
其次就是js怎么把这个字节数组展示成图片,在一个div中。
不知我理解的流程是否正确,每个流程中的难点应该如何攻破,求高手指点。


只要服务器配置了 Content-Type,直接输出字节码就可以,对客户端而言和图片文件没什么区别。

如果非要是一个 JS 中的字符串,就要先进行 BASE64 编码,然后生成 data URL,最后生成 img 对象,可以参考 SO 上的 Display image from http response with image content type


直接把你的字节码放在img的src中就可以实现。你可以把下面代码是src放入游览器中,也可以直接访问。

<img src="data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QN6aHR0
cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1
TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5z
Om1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAxNCA3OS4xNTE0ODEsIDIw
MTMvMDMvMTMtMTI6MDk6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDov
L3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRp
b24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8x
LjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBl
L1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NDVjMzFmZmQtZGVmNi00NTRi
LWFiMzQtODE0NjYyNWI0OTA1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg4MDIyNzY1
NjFDNjExRTU5RjYwQzJBNjAyMzc1MjNDIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg4
MDIyNzY0NjFDNjExRTU5RjYwQzJBNjAyMzc1MjNDIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2Jl
IFBob3Rvc2hvcCBDQyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5z
dGFuY2VJRD0ieG1wLmlpZDo0NWMzMWZmZC1kZWY2LTQ1NGItYWIzNC04MTQ2NjI1YjQ5MDUi
IHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDVjMzFmZmQtZGVmNi00NTRiLWFiMzQtODE0
NjYyNWI0OTA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRh
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" width="126" height="36" >

var img = new Image();
img.src='http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud10.png';
document.body.appendChild(img);

把图片地址换成你所谓的服务端接口即可。

【热门文章】
【热门文章】