Question

说我有一个像

这样的网址

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

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

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

Answer 1

也许

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';
  }

Answer 2

<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>

JavaScript可以加载HTML5 Canvas中使用的原始字节吗？

2 个答案: