PNG或JPG（而不是rgb）通过websocket与ArrayBuffer无base64

有没有办法将PNG图像呈现到画布而不必将其编码到base64？PNG或JPG（而不是rgb）通过websocket与ArrayBuffer无base64

服务器以二进制形式发送PNG，客户机通过ArrayBuffer 接收它并将其显示在画布上。只有这样我才能实现这个目标，就是将数据编码为base64 - 在服务器端 - 因为我需要它的速度很快。在客户端，我用data:image/png;base64标签创建了一个图像对象。

我知道你可以创建一个blob和一个文件阅读器，但我无法让它工作。

这是块版本：

var blob = new Blob([image.buffer],{type: "image/png"}); 
var imgReader = new FileReader(); 

imgReader.onload = function (e) { 
    var img = new Image(); 
    img.onload = function (e) { 
    console.log("PNG Loaded"); 
    ctx.drawImage(img, left, top); 
    window.URL.revokeObjectURL(img.src);  
    img = null; 
    }; 

    img.onerror = img.onabort = function() {   
    img = null; 
    }; 
    img.src = e.target.result;    
    imgReader = null; 
} 
imgReader.readAsDataURL(blob);

图像Uint8Array。我从它创建一个blob。其余的是不言自明的。

图片是正确的和有效的PNG图像。当我从服务器发送它时，我将它们写入服务器端的一个文件，并且它们在图像查看器中渲染得很好。

来源

2015-03-31 Evren Bingøl

您可以创建createObjectURL斑点网址，而不必做任何base64编码，只需通过BLOB你装箱到它，你将有一个网址，你可以设置为img.src

var blob = new Blob([image],{type: "image/png"}); 
    var img = new Image(); 
    img.onload = function (e) { 
    console.log("PNG Loaded"); 
    ctx.drawImage(img, left, top); 
    window.URL.revokeObjectURL(img.src);  
    img = null; 
    }; 

    img.onerror = img.onabort = function() {   
    img = null; 
    }; 
    img.src = window.URL.createObjectURL(blob);

来源

2015-04-04 15:39:23 Musa

感谢我试着类似的东西，但没有使用createObjectUrl。 – 2015-04-06 19:04:41

我只看到它以这种方式使用。如果您不想通过网络发送base64，则可以使用将二进制数据转换为客户端的base64。

看着MDN，drawImage需要CanvasImageSource对象。 CanvasImageSource代表HTMLImageElement，ImageBitmap和其他几个类型的任何对象。

在进一步搜索时，我发现一些与ImageBitmap有关的信息，但不足以提供解决方案。

我本可以在评论中加入这个，但是，这将成为一个大规模的评论，并失去了所有的清晰度。

来源

2015-04-03 13:36:31 andHapp

PNG或JPG（而不是rgb）通过websocket与ArrayBuffer无base64

回答

相关问题