本文介绍了canvas.toDataURL()不是一个函数 - 错误节点 - webGL包装器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目前,我正试图将基于浏览器的客户端卷呈现代码转换为服务器端基于纯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包装器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-16 22:26