canvas.toDataURL() ist keine Funktion - error node-webGL wrapper

Question

Momentan versuche ich browserbasierten clientseitigen Volumen Rendering-Code zu serverseitig reinen Javascript-basierten Rendering zu konvertieren.

Ich benutze Node-Webgl auf der Serverseite. Mein Hauptziel ist es, den Canvas-Inhalt des Servers an den Client zu senden, später werden diese Bilddaten auf dem Client angezeigt.

Aber vorher muss ich überprüfen, ob das Rendering korrekt ist. Daher habe ich canvas.toDataURL() verwendet, um Canvas-Daten zu extrahieren und sie in einem separaten Fenster anzuzeigen. Aber ich stehe vor dem Fehler.

Unten ist mein Code:

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'); 

und volumerc_main in volumercserver.js enthalten ist (einschließlich hier nur erforderlich 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 
    // }; 

Nun, wenn Ich renne Knoten npm.js Ich bekomme den Fehler,

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) 

Protokoll der Leinwand gerade vor dem I-Fehler bei toDataURL erhalten()

{ 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] } 

Bitte helfen Sie mir, diese zu lösen.

Answer 1

Die .toDataURL() - Funktion ist nicht in Node-WebGL-Wrapper definiert. Eine alternative Methode ist die Verwendung von gl.readPixels (vorgeschlagen von einem Mitglied dieser Gruppe).

Hier ist der Weg, es zu benutzen.

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

nach der Ausführung von gl.readPixels ist die Pufferdaten in Pixel. Die Daten haben das Format ImageData(). Mit diesen Daten kann ein weiterer benötigter Prozess durchgeführt werden.