diff --git a/multi/fusion.js b/multi/fusion.js new file mode 100644 index 0000000000000000000000000000000000000000..0889deb64d72953634cd049109bfb5fdfdefb8ac --- /dev/null +++ b/multi/fusion.js @@ -0,0 +1,17 @@ +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; + } + } +} diff --git a/multi_processing.js b/multi_processing.js new file mode 100644 index 0000000000000000000000000000000000000000..cafa8dc2e10f3798b1bcf2f6fb5aad9d5b975cfb --- /dev/null +++ b/multi_processing.js @@ -0,0 +1,76 @@ +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); +} diff --git a/samples/image_fusion_0.html b/samples/image_fusion_0.html new file mode 100644 index 0000000000000000000000000000000000000000..82d2065c3bf6bbed5db327c0328487da3c7b27cf --- /dev/null +++ b/samples/image_fusion_0.html @@ -0,0 +1,24 @@ +<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>