任何人都知道如何将通过websocket(从C#app)发送的字节转换为图像?然后我想在画布上绘制图像。我可以看到两种方法:
这是我的函数,它接收绘图的字节:
function draw(imgData) {
var img=new Image();
img.onload = function() {
cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
};
// What I was using before...
img.src = "data:image/jpeg;base64,"+imgData;
}
之前我收到的图像已经转换为base64字符串了,但是在得知发送字节的尺寸较小(小30%?)后,我宁愿让它工作。我还应该提到图像是一个jpeg。
任何人都知道我会这样做吗?谢谢您的帮助。 :)
答案 0 :(得分:4)
如果您的图像已经是jpeg,您只需将接收的数据转换为base64流即可。 Firefox和Webkit浏览器(我记得)有一定的功能,btoa()
。它将输入字符串转换为base64编码的字符串。它的对应物是atob()
,反其道而行之。
您可以像以下一样使用它:
function draw(imgData){
var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands for
var img = new Image();
img.src = "data:image/jpeg;base64," + b64imgData;
document.body.appendChild(img); //or append it to something else, just an example
}
如果您定位的浏览器(例如IE)不是Firefox或Webkit,您可以使用互联网上的多重转换功能之一(good one,它还提供有关的性能统计数据多个浏览器,如果您有兴趣:)
答案 1 :(得分:3)
我最后用过这个:
function draw(imgData, frameCount) {
var r = new FileReader();
r.readAsBinaryString(imgData);
r.onload = function(){
var img=new Image();
img.onload = function() {
cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = "data:image/jpeg;base64,"+window.btoa(r.result);
};
}
我需要在使用btoa()之前将字节读入字符串。