src为blob:开头的链接图片
服务端
app.get('/getImg',function(req,response){
response.set( 'content-type', "image/jpeg" );
var stream = fs.createReadStream( "./1.jpg" );
var responseData = [];//存储文件流
if (stream) {//判断状态
stream.on('data', function (chunk) {
responseData.push(chunk);
});
stream.on('end', function () {
var finalData = Buffer.concat(responseData);
response.write(finalData);
console.log(finalData)
response.end();
});
}
});
finalData 的结果如下
前端
Headers 数据如下
Preview如下图
Response
调用接口的方法
export function openAlgorithm(data){
return request({
url:'/getImg',
params:data,
method:'get',
responseType: "arraybuffer"
})
}
responseType: “arraybuffer” 这个参数一定不能少 少了这个参数 页面中无法显示我们预期的结果
Base64 显示
后
台
将
图
片
读
取
成
二
进
制
格
式
,
前
端
请
求
到
这
些
二
进
制
数
据
,
然
后
将
这
些
二
进
制
数
据
,
转
化
成
U
n
i
c
o
d
e
字
符
串
\color{#f10} 后台将图片读取成二进制格式,前端请求到这些二进制数据,然后将这些二进制数据,转化成Unicode字符串
后台将图片读取成二进制格式,前端请求到这些二进制数据,然后将这些二进制数据,转化成Unicode字符串
然
后
把
这
些
转
过
来
的
字
符
串
编
译
成
b
a
s
e
6
格
式
,
之
后
在
和
b
a
s
e
64
格
式
前
缀
拼
接
起
来
\color{#f10} 然后把这些转过来的字符串编译成base6格式,之后在和base64格式前缀拼接起来
然后把这些转过来的字符串编译成base6格式,之后在和base64格式前缀拼接起来
openAlgorithm({ index: val }).then((res) => {
const bytes = new Uint8Array(res.data);
let len = bytes.byteLength;
let storeData = "";
for (let i = 0; i < len; i++) {
storeData += String.fromCharCode(bytes[i]);
}
this.imgurl = "data:image/jpg;base64," + window.btoa(storeData);
});
Uint8Array
数组类型表示一个 8 位无符号整型数组,创建时内容被初始化为 0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
返回数组中元素的字节数,Uint8Array 中返回 1 字节。
Uint16Array
类型数组表示 16 位无符号整数,按平台字节顺序排列。如果需要控制字节顺序,请使用 DataView 代替。内容被初始化为 0。建立后,就可以使用对象的方法或使用标准数组索引语法(即使用括号表示法)引用数组中的元素。
返回元素大小的数值。在 Uint16Array 情况下为 2。
(数组的字节长度应为2的倍数)
Uint32Array
返回一个数值,代表Uint32Array中单个元素的字节大小。Uint32Array 返回 4。
(数组的字节长度应为4的倍数)
String.fromCharCode
静态 String.fromCharCode() 方法返回由指定的 UTF-16 代码单元序列创建的字符串。
语法
String.fromCharCode(num1[, …[, numN]])
num1, …, numN
一系列 UTF-16 代码单元的数字。范围介于 0 到 65535(0xFFFF)之间。大于 0xFFFF 的数字将被截断。不进行有效性检查。
返回值
一个长度为 N 的字符串,由 N 个指定的 UTF-16 代码单元组成。
描述
该方法返回一个字符串,而不是一个 String 对象。
由于 fromCharCode() 是 String 的静态方法,所以应该像这样使用:String.fromCharCode(),而不是作为你创建的 String 对象的方法。
Window btoa()
btoa() 方法用于创建一个 base-64 编码的字符串。
该方法使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串。
base-64 解码使用方法是 atob() 。
Blob 显示
将 请 求 到 的 二 进 制 数 据 , 转 换 成 b l o b 对 象 , 再 c r e a t e O b j e c t U R L 创 建 一 个 包 含 b l o b 对 象 的 u r l \color{#f10} 将请求到的二进制数据,转换成blob对象 ,再createObjectURL创建一个包含blob对象的url 将请求到的二进制数据,转换成blob对象,再createObjectURL创建一个包含blob对象的url
Blob 对象表示一个不可变、原始数据的类文件对象
B
l
o
b
(
)
构
造
函
数
返
回
一
个
新
的
B
l
o
b
对
象
。
b
l
o
b
的
内
容
由
参
数
数
组
中
给
出
的
值
的
串
联
组
成
。
\color{#f10}Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。
v
a
r
a
B
l
o
b
=
n
e
w
B
l
o
b
(
a
r
r
a
y
,
o
p
t
i
o
n
s
)
;
\color{#f10}var \ aBlob = new Blob( array, options );
var aBlob=newBlob(array,options);
a
r
r
a
y
是
一
个
由
A
r
r
a
y
B
u
f
f
e
r
,
A
r
r
a
y
B
u
f
f
e
r
V
i
e
w
,
B
l
o
b
,
D
O
M
S
t
r
i
n
g
等
对
象
构
成
的
A
r
r
a
y
,
或
者
其
他
类
似
对
象
的
混
合
体
,
它
将
会
被
放
进
B
l
o
b
。
D
O
M
S
t
r
i
n
g
s
会
被
编
码
为
U
T
F
−
8
。
\color{#f10}array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
array是一个由ArrayBuffer,ArrayBufferView,Blob,DOMString等对象构成的Array,或者其他类似对象的混合体,它将会被放进Blob。DOMStrings会被编码为UTF−8。
o p t i o n s 是 一 个 可 选 的 B l o b P r o p e r t y B a g 字 典 , 它 可 能 会 指 定 如 下 两 个 属 性 : \color{#f10} options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性: options是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
- t y p e , 默 认 值 为 " " , 它 代 表 了 将 会 被 放 入 到 b l o b 中 的 数 组 内 容 的 M I M E 类 型 。 \color{#f10} type,默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。 type,默认值为"",它代表了将会被放入到blob中的数组内容的MIME类型。
- e n d i n g s , 默 认 值 为 " t r a n s p a r e n t " , 用 于 指 定 包 含 行 结 束 符 / n 的 字 符 串 如 何 被 写 入 。 它 是 以 下 两 个 值 中 的 一 个 : " n a t i v e " , 代 表 行 结 束 符 会 被 更 改 为 适 合 宿 主 操 作 系 统 文 件 系 统 的 换 行 符 , 或 者 " t r a n s p a r e n t " , 代 表 会 保 持 b l o b 中 保 存 的 结 束 符 不 变 N o n − S t a n d a r d \color{#f10} endings,默认值为"transparent",用于指定包含行结束符/n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变 Non-Standard endings,默认值为"transparent",用于指定包含行结束符/n的字符串如何被写入。它是以下两个值中的一个:"native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者"transparent",代表会保持blob中保存的结束符不变Non−Standard
createObjectURL
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
返回值
一个DOMString包含了一个对象 URL,该 URL 可用于指定源 object的内容。
openAlgorithm({ index: val }).then((res) => {
const blob = new Blob([res.data], { type: "image/jpg" })
this.imgurl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log(this.imgurl)
});