Prajwal_7 Prajwal_7 - 1 year ago 123
Node.js Question

canvas.toDataURL() is not a function - error node-webGL wrapper

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:


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

requestAnimationFrame = document.requestAnimationFrame;

//Read and eval library
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'));


and volumerc_main is contained in volumercserver.js (including here only required code)

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

var canvas = document.createElement("canvas"); = '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 npm.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
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 befor 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] }

Please help me to solve this.

Answer Source

.toDataURL() function is not defined in node-webGL wrapper. An alternative method is to make use of gl.readPixels (suggested by a member of this group).

Here is the way to use it.

var pixels = new Uint8Array(canvas.width * canvas.height * 4);
gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

after the execution of gl.readPixels, the buffer data is present in pixels. The data is of ImageData() format. With this data, further required process can be done.