test/view/img.js

   1 var ws = new  WebSocket("ws://192.168.4.145:3000");
   2 var i = 0;
   3
   4 function draw(data){
   5   var ctx;
   6   var imgData;
   7   var emData;
   8   var canvas = document.getElementById('test');
   9
  10   if(canvas.getContext){
  11     ctx = canvas.getContext('2d');
  12   }
  13
  14   imgData = ctx.createImageData(128, 128);
  15   emData = JSON.parse(data);
  16
  17 // 各ピクセルの色情報設定
  18   for (var i=0;i<128;i++){
  19     for (var j=0;j<128;j++){
  20       var n = j*4+i*128*4;
  21       var pixel = emData[i][j];
  22       imgData.data[n]   = pixel;
  23       imgData.data[n+1] = pixel;
  24       imgData.data[n+2] = pixel;
  25       imgData.data[n+3] = 255;
  26     }
  27   }
  28
  29   // CanvasのコンテキストにImageDataを設定
  30   ctx.putImageData(imgData, 0, 0);
  31 }
  32
  33 // メッセージ受信時の処理
  34 ws.onmessage = function(event){
  35   if(event.data=="init"){
  36     ws.send("acq")
  37   }else{
  38     ws.send("acq");
  39     draw(event.data);
  40     console.log(i);
  41     i = i + 1;
  42   }
  43 };
  44