JavaScript可以加载原始字节以在HTML5画布中使用吗？_Javascript_Html_Canvas

JavaScript可以加载原始字节以在HTML5画布中使用吗？

javascript html canvas

JavaScript可以加载原始字节以在HTML5画布中使用吗？,javascript,html,canvas,Javascript,Html,Canvas,假设我有一个像 http://my.website.com/myfile.raw 它指向的这个文件只是原始字节，代表一个强度图像。是否可以获取这些数据并读取JavaScript中的字节？然后将其与HTML5画布一起使用（例如，putImageData）来绘制图像或者，在没有Java或Flash的浏览器中，还有其他方法可以做到这一点吗 function draw() { var ctx = document.getElementById('canvas').getContext('2d

假设我有一个像

http://my.website.com/myfile.raw

它指向的这个文件只是原始字节，代表一个强度图像。是否可以获取这些数据并读取JavaScript中的字节？然后将其与HTML5画布一起使用（例如，

putImageData

）来绘制图像

或者，在没有Java或Flash的浏览器中，还有其他方法可以做到这一点吗

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      imageData = ctx.getImageData(0, 0, image.width, image.height)
      //now you can do something with imageData...
    }
    img.src = 'http://my.website.com/myfile.raw';
  }


福
var帆布；
函数图（imgData）{
var ctx=canvas.getContext（'2d'）；
var myImageData=ctx.createImageData（canvas.width、canvas.height）；
var ctxData=myImageData.data
var iter=canvas.width*canvas.height*4；//RGBA
while（iter--）{ctxData[iter]=imgData[iter]；}
ctx.putImageData（myImageData，0,0）；
}
函数httpGetAsync（URL，回调）{
var xmlHttp=new XMLHttpRequest（）；
xmlHttp.responseType=“arraybuffer”；
xmlHttp.onreadystatechange=函数（）{
if（xmlHttp.readyState==4&&xmlHttp.status==200）{
var arrayBuffer=xmlHttp.response
var byteArray=新的UINT8阵列（arrayBuffer）；
回调（byteArray）；
}
}
open（“GET”，theUrl，true）；//对于异步
xmlHttp.send（空）；
}
函数tick（）{
httpGetAsync（“http://127.0.0.1:8082/video“，抽签）；
}
函数加载（）{
canvas=document.getElementById（'canvas'）；
}
窗口设置间隔（勾号，10000）；
window.onload=已加载；
.................
.................

这真的有效吗？通常，

src

属性引用一个已知格式的文件，如png或jpg。我不认为浏览器知道“原始”格式……我想我在4年前回答这个问题时误解了这个问题。对不起，我可能会用这个：或者甚至是二进制数据和WebSocket。然后，您可以对数据做任何您想做的事情——将数据绘制到画布上等等。

<head>
<title>foo</title>
<script>
var canvas;

function draw(imgData) {
    var ctx = canvas.getContext('2d');
    var myImageData = ctx.createImageData(canvas.width, canvas.height);
    var ctxData = myImageData.data
    var iter = canvas.width * canvas.height * 4; //RGBA
    while(iter--){ctxData[iter] = imgData[iter];}
    ctx.putImageData(myImageData, 0, 0);
}

function httpGetAsync(theUrl, callback) {
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.responseType = "arraybuffer";   
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var arrayBuffer = xmlHttp.response
            var byteArray = new Uint8Array(arrayBuffer);
            callback(byteArray);
        }
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

function tick(){
    httpGetAsync("http://127.0.0.1:8082/video", draw);
}

function loaded(){
    canvas = document.getElementById('canvas');
}

window.setInterval(tick, 10000);
window.onload = loaded;

</script>
</head>
<body>
    <div>.................</div>
    <canvas id='canvas' width="320" Height="240" ></canvas>
    <div>.................</div>
</body>