canvas.toDataURL() is not a function - error in javascript code running in node.js server

[Prajwal Sapare]

Hello All,

Currently I am trying to convert browser based client side volume rendering code to server side pure javascript based rendering.

I use node-webgl at server side. My main goal is to send the canvas content of server to client, later this image data is displayed on the client.

But before this I need to check whether the rendering is proper. So I used canvas.toDataURL() to extract canvas data and want to display it on a separate window. But I am facing the error.

Below is my code:

Entry point: exp.js

var nodejs=true,

WebGL = require('./node_modules/node-webgl/index'),
document = WebGL.document();

document.setTitle("Lesson02");
requestAnimationFrame = document.requestAnimationFrame;
alert=console.error;

//Read and eval library
fs=require('fs');
eval(fs.readFileSync(__dirname+ '/sylvester.js','utf8'));
eval(fs.readFileSync(__dirname+ '/glUtils.js','utf8'));
eval(fs.readFileSync(__dirname+ '/glAux.js','utf8'));
eval(fs.readFileSync(__dirname+ '/volumercserver.js','utf8'));

volumerc_main('./raycast-color.frag','./aorta-high512.jpg','./tfold.png');

and excerpt of volumercserver.js (including here only required code)

var Image = require("node-webgl").Image;

var canvas = document.createElement("canvas");
canvas.id = 'canvas_win';
canvas.width= 512;
canvas.height= 512;
var gl;

var canvas1 = document.createElement("canvas");
canvas1.width= 512;
canvas1.height= 512;
var ctx = canvas1.getContext('2d');

try {
    gl = canvas.getContext("webgl", {premultipliedAlpha: false}) ||    canvas.getContext("experimental-webgl",{premultipliedAlpha: false});
} catch (e) {
}
if (!gl) {
    alert("Could not initialise WebGL, sorry :-(");
}   

// All computations take place here
//................
//..................
//.............

     var dataURLstring = canvas.toDataURL();

     var img1 = new Image;
     img1.src = dataURLstring;
    // img1.onload = function(){
     ctx.drawImage(img1,0,0); // Or at whatever offset you like
    // };

Now, when I run node exp.js I get the error,

C:\Users\z003npra\Desktop\node>node exp.js
Status: Using GLEW 1.13.0
Status: Using GLEW 1.13.0
undefined:443
            var dataURLstring = canvas.toDataURL();
                                       ^

TypeError: canvas.toDataURL is not a function
at drawVolume (eval at <anonymous> (C:\Users\z003npra\Desktop\node\exp.js:15
:9), <anonymous>:443:30)
at Timer.listOnTimeout (timers.js:92:15)

Log of canvas just before I get error at toDataURL()

{ type: 'nodeGLFW',
ratio: 1,
setTitle: [Function],
setIcon: [Function],
flip: [Function],
getElementById: [Function],
createElement: [Function],
createWindow: [Function],
getContext: [Function],
on: [Function],
addEventListener: [Function],
removeEventListener: [Function],
requestAnimationFrame: [Function],
drawingBufferWidth: 800,
width: 512,
drawingBufferHeight: 800,
height: 512,
canvas: [Circular],
id: 'canvas_win',
onmousedown: [Function: handleMouseDown],
onmouseup: [Function: handleMouseUp],
onmousemove: [Function: handleMouseMove] }

Is toDataURL() disabled in node-webGL implementation? I could use toDataURL() in node-canvas package, but there is no WebGL implementation there. If I use node-WebGL I get error as toDataURL() is not a function.

Please help me to solve this. I am using node.js v4.5.0 and node-webgl version v0.5.5

Regards,

Prajwal

[Jaume Sánchez]

Hi, Prajwal, I'm going to reply to both to your e-mails in this one:

node-webgl is not WebGL for the server: it's a wrapper of the server's native OpenGL, exposing methods that you can call from node.js with JavaScript. There are other similar modules, like https://github.com/stackgl/headless-gl. 

Most of these wrappers just add GL functionality, and don't all all the reading and writing methods available on the browser: that means the WebGL-specific calls are supported, but canvas ones, like .toDatarURL aren't. Think about it like having a working implementation of WebGLRenderingContext, but not of HTMLCanvasElement.

Also keep in mind that WebGL is based on OpenGL ES, and these wrappers are based on OpenGL, there might be some differences (https://www.khronos.org/webgl/wiki_1_15/index.php/WebGL_and_OpenGL_Differences)

So, regarding .toDataURL, you'll have to find another node module that recreates that functionality, or write your own code using .readPixels to get the framebuffer data and a image-writer library.

Just wanted to stress that what you're dealing with is not WebGL properly, but a wrapper of OpenGL that can be called from node.js. Same as node-canvas (which is a wrapper of Cairo) that does have a .toDataURL method, but it's based on a completely different code from the browsers' version.

Hope it makes sense!

Cheers,

Jaume

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-list+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Prajwal Sapare]

Hi Jaume,

Thanks for the reply. I was using this node-webgl as a dependency module for my project. Literally I do not know coding part of webgl. Anyways I need to write .toDataURL function. Could you please let me know how complex it is to implement this function(and approximate time for this implementation). You have provided some hint of libraries to make use of. As said I am novice, Any links or procedure or method to create this function? Well, I do not know what I am asking is right or not. I am sorry if I am bothering you. Thanks again. :)

To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.

[Jaume Sánchez]

You could use the example in https://github.com/stackgl/headless-gl to get the color buffer, and use https://www.npmjs.com/package/jpeg or https://www.npmjs.com/package/jpeg-js to write a JPEG file. That's just an option, I haven't tested it works, but it should.

To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-list+unsubscribe@googlegroups.com.