websocket 如何推送图片

WebSocket 协议本身并不支持直接传输二进制数据，但是可以将二进制数据编码为 Base64 字符串，然后在消息中传输该字符串。以下是一个简单的示例代码：

客户端发送图片：

// 将图片转换为 Base64 编码字符串
function imageToBase64(imageUrl) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const img = new Image;
  img.src = imageUrl;
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL();
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

// 发送图片
function sendImage(imageUrl) {
  const message = {
    type: 'image',
    data: imageToBase64(imageUrl)
  };
  websocket.send(JSON.stringify(message));
}

其中，`imageToBase64` 函数用于将图片转换为 Base64 编码字符串，`sendImage` 函数用于发送图片。在发送消息时，需要将消息的类型设置为 `'image'`，并将图片的 Base64 编码字符串作为数据发送给服务器。

服务端接收图片：

// 解码 Base64 编码字符串为二进制数据
function base64ToBinary(base64String) {
  const binaryString = window.atob(base64String);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

// 处理图片消息
function handleImageMessage(message) {
  const imageData = base64ToBinary(message.data);
  // 将 imageData 存储到服务器或者转发给其他客户端
}

其中，`base64ToBinary` 函数用于解码 Base64 编码字符串为二进制数据，`handleImageMessage` 函数用于处理接收到的图片消息。在处理消息时，需要将消息中的 Base64 编码字符串解码为二进制数据，然后将数据存储到服务器或者转发给其他客户端。