javascript 将字节转换为用于在 HTML5 画布上绘制的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12041851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting bytes to an image for drawing on a HTML5 canvas
提问by Joey Morani
Anyone know how I would convert bytes which are sent via a websocket (from a C# app) to an image? I then want to draw the image on a canvas. I can see two ways of doing this:
任何人都知道我如何将通过 websocket（来自 C# 应用程序）发送的字节转换为图像？然后我想在画布上绘制图像。我可以看到两种方法：
- Somehow draw the image on the canvas in byte form without converting it.
- Convert the bytes to a base64 string somehow in javascript then draw.
- 不知何故以字节形式在画布上绘制图像而不进行转换。
- 在javascript中以某种方式将字节转换为base64字符串然后绘制。
Here's my function which receives the bytes for drawing:
这是我接收绘制字节的函数：
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;
}
I was receiving the image already converted as a base64 string before, but after learning that sending the bytes is smaller in size (30% smaller?) I would prefer to get this working. I should also mention that the image is a jpeg.
我之前收到的图像已经转换为 base64 字符串，但是在了解到发送的字节大小更小（小 30%？）之后，我更愿意让它工作。我还应该提到图像是 jpeg。
Anyone know how I would do it? Thanks for the help. :)
有谁知道我会怎么做？谢谢您的帮助。:)
采纳答案by Joey Morani
I used this in the end:
我最后使用了这个：
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);
};
}
I needed to read the bytes into a string before using btoa().
在使用 btoa() 之前，我需要将字节读入字符串。
回答by tomsmeding
If your image is really a jpeg already, you can just convert the received data to a base64 stream. Firefox and Webkit browsers (as I recall) have a certain function, btoa(). It converts the input string to a base64 encoded string. Its counterpart is atob()that does the opposite.
如果您的图像已经是 jpeg，您只需将接收到的数据转换为 base64 流。Firefox 和 Webkit 浏览器（我记得）有一个特定的功能，btoa(). 它将输入字符串转换为 base64 编码的字符串。它的对应物是atob()相反的。
You could use it like the following:
你可以像下面这样使用它：
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
}
If the browser you target (IE, for example) isn't Firefox or a Webkit one, you can use one of the multiple conversion function lying around the internet (good one, it also provides statistics of performances in multiple browsers, if you're interested :)
如果您的目标浏览器（例如 IE）不是 Firefox 或 Webkit 浏览器，您可以使用互联网上的多种转换功能之一（很好，它还提供多种浏览器的性能统计数据，如果您重新感兴趣:)
