canvas.toDataURL（）不是一个函数 - 错误节点 - webGL包装器 [英] canvas.toDataURL() is not a function - error node-webGL wrapper

问题描述

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