1图像的存储

1.1结构

1.1.1 python 对于 图像的处理 主要用到4种结构

numpy.narray 结构 用到cv2 插件 ,图像处理工具PIL.image 结构 用到pil插件 ,图像读写显示工具py3. bytes 或者bytearray结构 用于网络传输py3.BytesIO io流结构 用于bytes的内存处理

1.1.2 js 对于 图像的处理主要有 3中结构

File 文件结构 用于读入打开的文件blob 大数据流结构 用于网络传输ArrayBuffer 数组缓存结构 用于内存存储,具体还可分解为以下几种:

Int8Array 1 8位二补码有符号整数 Uint8Array 1 8位无符号整数 Uint8ClampedArray 1 8位无符号整型固定数组(数值在0~255之间) Int16Array 2 16位二补码有符号整数 Uint16Array 2 16位无符号整数 Int32Array 4 32 位二补码有符号整数 Uint32Array 4 32 位无符号整数 Float32Array 4 32 位 IEEE 浮点数 Float64Array 8 64 位 IEEE 浮点数 对于图像主要就是Uint8Array 结构

1.2 格式

图像有很多保存格式 bmp, png,jpg ,gif 等等

jpg 是一种图像的压缩格式

转换传输流程

后端发送

方案一

cv2.读取图像(narray格式) 用 Image.fromarray() 转成 pil.image格式 用 Image.save() 转成jpg格式的 BytesIO流格式 用 BytesIO.getvalue() 转成 bytes格式 通过 websocket 传输 bytes

方案二

cv2.读取图像(narray格式) 用 cv2.imencode() 转成 jpg 格式的narray 用 img_encode.tobytes() 转成bytes格式 通过 websocket 传输 bytes

前端接收

方案1

前端收到后存入 blob 用FileReader.readAsArrayBuffer() 读取blob到 Uint8Array Uint8Array 转字符串 binaryString (binaryString相当于 bytes ) 用btoa() 把 binaryString 转成 base64格式 加上前缀 “data:image/jpeg;base64,” 赋值给 img.src

方案2

前端收到后存入 blob 用FileReader.readAsDataURL() 读取blob 赋值给 img.src

方案3

用 createObjectURL() 读取blob 赋值给 img.src

代码

建议使用方案2和方案3

//对应方案2 function blob2img2(blob, img) { var a = new FileReader(); a.onload = function(e) { //console.log(e.target) img.src = e.target.result; } a.readAsDataURL(blob); } function blob2img3(blob, img) { //对应方案3 var source = window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob); img.src = source; }; ```