将websocket中推送的Base64图片转换为DataURL格式 代码

可以使用JavaScript的atob()和Uint8Array()函数将Base64图片转换为DataURL格式，代码如下：

let base64String = 'base64 string of image';
let bytes = window.atob(base64String);
let arrayBuffer = new Uint8Array(bytes.length);
for (let i = 0; i < bytes.length; i++) {
arrayBuffer[i] = bytes.charCodeAt(i);
}
let dataURL = window.URL.createObjectURL(new Blob([arrayBuffer], {type: 'image/png'}));

相关问题

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 编码字符串解码为二进制数据，然后将数据存储到服务器或者转发给其他客户端。

WebSocket 消息推送示例代码

以下是 WebSocket 消息推送的示例代码：

// 建立 WebSocket 连接
var socket = new WebSocket("ws://localhost:808");

// 连接成功时触发
socket.onopen = function(event) {
  console.log("WebSocket 连接成功");
};

// 接收到消息时触发
socket.onmessage = function(event) {
  console.log("接收到消息：" + event.data);
};

// 发送消息
socket.send("Hello, WebSocket!");

希望对你有帮助。