Say I had a URL like
.raw
and this file it points to was just raw bytes, representing an intensity image. Is it possible to grab this data and read the bytes in JavaScript? And then using it with HTML5 canvas (e.g. putImageData) to draw an image?
Or is there some other way to do this in the browser without Java or Flash?
Say I had a URL like
http://my.website./myfile.raw
and this file it points to was just raw bytes, representing an intensity image. Is it possible to grab this data and read the bytes in JavaScript? And then using it with HTML5 canvas (e.g. putImageData) to draw an image?
Or is there some other way to do this in the browser without Java or Flash?
Share Improve this question edited Jul 25, 2014 at 11:28 Qantas 94 Heavy 16k31 gold badges72 silver badges88 bronze badges asked Apr 9, 2010 at 2:37 whiskeyspiderwhiskeyspider 1211 silver badge3 bronze badges2 Answers
Reset to default 1maybe
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./myfile.raw';
}
<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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745104446a4611473.html
评论列表（0条）