Skip to content
Snippets Groups Projects
Commit ef4a8c83 authored by Marius Bilasco's avatar Marius Bilasco
Browse files

ajout de multi_processing

parent 545ce850
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
multi/fusion.js 0 → 100644
+ 17
− 0
View file @ ef4a8c83
MeanFuseMultiImagesTask=function(opt_options){}
MeanFuseMultiImagesTask.prototype.process_multi=function(imageDatas,fused) {
var w=0;
for (var y=0;y<fused.height;y++) {
for (var x=0;x<fused.width;x++) {
fused.data[w]=0; fused.data[w+1]=0; fused.data[w+2]=0; fused.data[w+3]=0;
for (idx in imageDatas) {
for (var i=0; i<4; i++) {
fused.data[w+i]+=imageDatas[idx].data[w+i];
}
}
for (var i=0; i<4; i++) fused[w+i]=Math.round(fused[w+i]/imageDatas.length);
w+=4;
}
}
}
multi_processing.js 0 → 100644
+ 76
− 0
View file @ ef4a8c83
var multi_processing=function(elementIds,task_multi,outputCanvasId) {
this.elementIds=elementIds;
this.element=[]; this.width=[]; this.height=[];
this.processing_canvas=[]; this.processing_context=[];
this.imageDatas=[];
var lastCanvasElt={};
for (idx in elementIds) {
this.element[idx]=document.getElementById(elementIds[idx]);
this.width[idx] = this.element[idx].width;
this.height[idx] = this.element[idx].height;
this.processing_canvas[idx]=document.createElement('canvas');
this.processing_canvas[idx].width = this.width[idx];
this.processing_canvas[idx].height = this.height[idx];
this.processing_context[idx]=this.processing_canvas[idx].getContext("2d");
this.imageDatas[idx] = {};
lastCanvasElt = this.processing_canvas[idx];
}
this.task_multi=task_multi;
if (outputCanvasId) {
this.processing_canvas_fused=document.createElement('canvas');
this.processing_canvas_fused.width=lastCanvasElt.width;
this.processing_canvas_fused.height=lastCanvasElt.height;
this.processing_context_fused=this.processing_canvas_fused.getContext("2d");
this.imageData_fused = this.processing_context_fused.getImageData(0,0,
this.processing_canvas_fused.width,
this.processing_canvas_fused.height);
this.output_canvas=document.getElementById(outputCanvasId);
this.output_context=this.output_canvas.getContext("2d");
}
}
multi_processing.prototype.acquire_data_from_img=function(id) {
this.processing_context[id].drawImage(this.element[id],0,0,this.width[id],this.height[id]);
this.imageDatas[id] = this.processing_context[id].getImageData(0, 0, this.width[id], this.height[id]);
}
multi_processing.prototype.acquire_data_from_video=function(id) {
this.processing_context[id].drawImage(this.element[id],0,0,this.width[id],this.height[id]);
this.imageDatas[id] = this.processing_context[id].getImageData(0, 0, this.width[id], this.height[id]);
}
multi_processing.prototype.acquire_data_from_canvas=function(id) {
this.processing_context[id].drawImage(this.element[id],0,0,this.width[id],this.height[id]);
this.imageDatas[id] = this.processing_context.getImageData(0, 0, this.width[id], this.height[id]);
}
multi_processing.prototype.acquire_data=function() {
for (id in this.elementIds) {
switch (this.element[id].nodeName.toLowerCase()) {
case 'canvas':
this.acquire_data_from_canvas(id); break;
case 'img':
this.acquire_data_from_img(id); break;
case 'video':
this.acquire_data_from_video(id); break;
default:
throw new Error('Element not supported!');
}
}
}
multi_processing.prototype.do_process=function() {
this.acquire_data();
this.task_multi.process_multi(this.imageDatas,this.imageData_fused);
if (this.output_canvas) this.update_output();
}
multi_processing.prototype.update_output=function() {
this.output_context.putImageData(this.imageData_fused,0,0);
}
samples/image_fusion_0.html 0 → 100644
+ 24
− 0
View file @ ef4a8c83
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../multi/fusion.js"></script>
<script lang="js" src="../multi_processing.js"></script>
</head>
<body>
<video autoplay loop src="../data/happy.mp4" id="input1" width="320" height="180"></video>
<br></br>
<video autoplay loop src="../data/surprise.mp4" id="input2" width="320" height="180"></video>
<br></br>
<canvas id="output" width="320" height="180"></canvas>
<script lang="javascript">
var _task=new MeanFuseMultiImagesTask()
var _proc=new multi_processing({0:"input1",1:"input2"},_task,"output");
var loop=function() {
_proc.do_process();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment