Revision history [back]

it turned out to be surprisingly easy. -- grab a base64 encoded data url from the canvas, and send it home via XmlHTTPRequest. here's some html/js:

<!DOCTYPE html>
<html><head>
<script type='text/javascript'>
  var ticks=0;
  var myServer="http://localhost:9000/"

  function draw() { // demo code to fill the canvas
    var c = document.getElementById("output");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,300,200);
    ctx.font = "30px Arial";
    ctx.fillText("Hello World " + ticks,10,50);
    ticks ++;

    postCanvasToURL(myServer);
  }

  function postCanvasToURL(url) { // this is the actual workhorse
    var type = "image/png"
    var data = document.getElementById("output").toDataURL(type);
    data = data.replace('data:' + type + ';base64,', ''); //split off junk at the beginning

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
    xhr.send(data)
  }
</script></head>
<body onload="setInterval(draw, 2000);">
  <canvas id="output" width=300 height=200 style="max-width: 100%"></canvas>
</body></html>

and a corresponding (python27) server, that just saves it to disc:

#!/usr/bin/python
import base64

def application(environ, start_response):
    try:
       request_body_size = int(environ.get('CONTENT_LENGTH', 0))
       request_body = environ['wsgi.input'].read(request_body_size)

       data = base64.b64decode(request_body)
       f = open("my.png","wb")
       f.write(data)
       f.close()
    except (ValueError):
       pass

    start_response('200 OK', [('Content-Type', 'text/html'), ('Content-Length', '5')])
    return ["dummy"]

if __name__ == '__main__':
    from wsgiref.simple_server import make_server
    httpd = make_server('localhost', 9000, application)
    while True: httpd.handle_request()

pic, or it did not happen ;)

image description

it turned out to be surprisingly easy. -- grab a base64 encoded data url from the canvas, and send it home via XmlHTTPRequest. to use it with opencv.js, you'll have to imshow() your Mat to the "output" canvas. here's some html/js:

<!DOCTYPE html>
<html><head>
<script type='text/javascript'>
  var ticks=0;
  var myServer="http://localhost:9000/"

  function draw() { // demo code to fill the canvas
    var c = document.getElementById("output");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,300,200);
    ctx.font = "30px Arial";
    ctx.fillText("Hello World " + ticks,10,50);
    ticks ++;

    postCanvasToURL(myServer);
  }

  function postCanvasToURL(url) { // this is the actual workhorse
    var type = "image/png"
    var data = document.getElementById("output").toDataURL(type);
    data = data.replace('data:' + type + ';base64,', ''); //split off junk at the beginning

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
    xhr.send(data)
  }
</script></head>
<body onload="setInterval(draw, 2000);">
  <canvas id="output" width=300 height=200 style="max-width: 100%"></canvas>
</body></html>

and a corresponding (python27) server, that just saves it to disc:

#!/usr/bin/python
import base64

def application(environ, start_response):
    try:
       request_body_size = int(environ.get('CONTENT_LENGTH', 0))
       request_body = environ['wsgi.input'].read(request_body_size)

       data = base64.b64decode(request_body)
       f = open("my.png","wb")
       f.write(data)
       f.close()
    except (ValueError):
       pass

    start_response('200 OK', [('Content-Type', 'text/html'), ('Content-Length', '5')])
    return ["dummy"]

if __name__ == '__main__':
    from wsgiref.simple_server import make_server
    httpd = make_server('localhost', 9000, application)
    while True: httpd.handle_request()

pic, or it did not happen ;)

image description