问题描述
目前,我正试图将基于浏览器的客户端卷呈现代码转换为服务器端基于纯JavaScript的呈现。
我在服务器端使用node-webgl。我的主要目标是将服务器的画布内容发送到客户端,稍后此图像数据显示在客户端上。
但在此之前,我需要检查渲染是否正确。所以我使用canvas.toDataURL()来提取画布数据,并希望在单独的窗口上显示它。但我面对的错误。
以下是我的代码:
exp.js
var nodejs = true,
WebGL = require('./ node_modules / node-webgl / index'),
= WebGL.document();
document.setTitle(Lesson02);
requestAnimationFrame = document.requestAnimationFrame;
alert = console.error;
//读取和评估库
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)。
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 :-();
}
//所有计算都发生在这里
// ................
// ........ ..........
// .............
var dataURLstring = canvas.toDataURL();
var img1 = new Image;
img1.src = dataURLstring;
// img1.onload = function(){
ctx.drawImage(img1,0,0); / /或在任何偏移你喜欢
//};
现在, strong> node npm.js 我收到错误,
C:\Users\z003npra\Desktop \ node> node exp.js
状态:使用GLEW 1.13.0
状态:使用GLEW 1.13.0
未定义:443
var dataURLstring = canvas.toDataURL
^
TypeError:canvas.toDataURL不是函数
在drawVolume(eval at< anonymous>(C:\Users\z003npra\Desktop\\\
ode \exp.js:15
:9),< anonymous>:443:30)
at Timer.listOnTimeout(timers.js:92:15)
画布的日志只是因为我在toDataURL()得到错误
{type:'nodeGLFW',
ratio:1,
setTitle:[Function],
setIcon:[Function] ,
getElementById:[Function],
createElement:[Function],
createWindow:[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]}
我解决这个问题。
解决方案.toDataURL()函数没有在node-webGL包装中定义。另一种方法是使用gl.readPixels(由该组的成员建议)。
这里是使用它的方式。
var pixels = new Uint8Array(canvas.width * canvas.height * 4);
gl.readPixels(0,0,canvas.width,canvas.height,gl.RGBA,gl.UNSIGNED_BYTE,pixels);在执行gl.readPixels之后,缓冲区数据存在于 像素中。
。数据为ImageData()格式。利用该数据,可以进行进一步需要的处理。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:
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 volumerc_main is contained in 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 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 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 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.
解决方案.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.
这篇关于canvas.toDataURL()不是一个函数 - 错误节点 - webGL包装器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!