超過socket.io

發送畫布圖像我想我Base64圖像移動到Buffers提供在Socket.io 1.0超過socket.io

我加載圖像，並與Canvas元調整它們的大小。

Canvas有一個還是蠻不支持.toBlob()，任何人有送我的畫布/圖像作爲arraybuffer在插座這也將讓我打開緩衝的另一面，並再次使其成爲畫布/圖像更兼容的方式。

2014-07-16 Laurens Kling

1.0版Socket.IO的最初將建立一個XHR或JSONP連接，然後將試圖替換與websocket連接的連接（如果有websockets可用）。對於不支持websocket的客戶來說，這是非常有價值的靈活性。如果您僅以二進制形式發送數據包，則這種靈活性將會丟失。 – markE

爲什麼這種靈活性會丟失？我不能只將圖像發送爲二進制文件嗎？ –

正如您所提到的，toBlob支持在舊版瀏覽器中傳輸二進制blob時不會廣泛使用，將會失敗。 Base64編碼產生的字符串值可以在任何版本的瀏覽器和socketIO中發送 - 更加靈活。 – markE

您可以使用canvas.toDataURL並使用socketIO發送base64編碼的dataURL。

var theDataURL = canvas.toDataURL();

dataURL是圖像的.PNG表示形式。如果您需要較小的文件大小畫布，也可以指定.JPEG表示。

// quality ranges from 0.00-1.00 
var jpgQuality=0.60; 

// get the dataURL in .jpg format 
var theDataURL = canvas.toDataURL('image/jpeg',jpgQuality);

兩者.PNG和.jpg格式dataURL比由context.getImageData輸送像素陣列更輕巧。像素數組的重量爲canvas.width * canvas.height * 4，而.png和.jpg格式在編碼過程中被壓縮/優化。

Base64編碼會產生一個字符串，因此它與所有瀏覽器以及socketIO傳輸的所有後備版本兼容。

然後就可以很容易地反序列化在接收側這樣的dataURL：

var img=new Image(); 
img.onload=start; 
img.src=theBase64URL; 
function start(){ 
    document.body.appendChild(img); 
    // or 
    context.drawImage(img,0,0);

}

來源

2014-07-16 18:07:28 markE

謝謝你awnser馬克，很高興知道pixelarray更大！我好奇，如果這個計數的任何其他緩衝區/文件類型我可能通過socket.io發送 –

回答

相關問題