python 如何把一张图片 通过websocket传到 js中

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;
			};

			
	```