Question

目前我正在尝试将基于浏览器的客户端卷渲染代码转换为服务器端基于纯JavaScript的渲染。

我在服务器端使用node-webgl。我的主要目标是将服务器的画布内容发送到客户端，稍后此图像数据将显示在客户端上。

但在此之前，我需要检查渲染是否正确。所以我使用canvas.toDataURL（）来提取画布数据，并希望在单独的窗口中显示它。但我面临的错误。

以下是我的代码：

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

和volumerc_main包含在volumercserver.js 中（此处仅包括所需代码）

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
    // };

现在，当我运行节点npm.js 时，我收到错误，

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)

画布日志只是因为我在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] }

请帮我解决这个问题。

Answer 1

.toDataURL（）函数未在node-webGL包装器中定义。另一种方法是使用gl.readPixels（由该组成员建议）。

以下是使用它的方法。

roc_auc_score

执行gl.readPixels后，缓冲区数据出现在像素中。数据是ImageData（）格式。利用这些数据，可以进一步完成所需的过程。

canvas.toDataURL（）不是函数 - 错误node-webGL包装器

1 个答案: