通过 websocket 发送 png 图像并渲染接收到的图像答案

【问题标题】：sending a png image over a websocket and rendering the received image通过 websocket 发送 png 图像并渲染接收到的图像
【发布时间】：2015-03-26 09:14:13
【问题描述】：

在服务器上：我正在加载一个 png 图片：

var myimage = png.load('test.png');

then sending over websocket connection:
ws.send(myimage);

在客户端：

function onMessage(evt) {
    if (evt.data instanceof ArrayBuffer) {
        var length = evt.data.byteLength;
        var bytes = new Uint8Array(evt.data);
        var image = document.getElementById("image");
        var img = new Image();
        img.src = 'data:image/png;base64,'+ window.btoa(bytes);
        var ctx = image.getContext("2d");
        ctx.drawImage(img, 0, 0);
}

没有在画布上显示任何内容。关于我做错了什么有什么想法吗？

【问题讨论】：

标签： image websocket png arraybuffer

【解决方案1】：

尝试创建一个 blob 并将其转换为 blob url

function onMessage(evt) {
    if (evt.data instanceof ArrayBuffer) {
        var length = evt.data.byteLength;
        var blob = new Blob([evt.data],{type:'image/png'});
        var url = URL.createObjectURL(blob);
        var image = document.getElementById("image");
        var img = new Image();
        img.onload = function(){
            var ctx = image.getContext("2d");
            ctx.drawImage(img, 0, 0);
        }
        img.src = url;
}

【讨论】：