image - 通过 websocket 发送一个 png 图像并渲染接收到的图像

Question

在服务器上:
我正在加载一个 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);
}

没有任何东西可以显示在 Canvas 上。关于我做错了什么的任何想法？

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