Tag: 节点canvas

使用Node在THREE.js中加载纹理

我正在尝试构build一个使用3D进行image processing的Messenger软件，并返回一个全新的图像。 我使用THREE.CanvasRenderer和我的应用程序托pipe在Heroku上。 当一个用户/ POST附件到我的webhook，我想采取新创build的图像的url，并将其插入到我的3D场景。 这是我的代码（使用节点 – canvas库）： const addTexture = (imageUrl) => { request({ uri: imageUrl, method: 'GET' }, (err, res, body) => { let image = new Canvas.Image(); image.src = body; mesh.material.map = new THREE.Texture(image); mesh.material.needsUpdate = true; }); } callback得到运行，我实际上可以console.log()图像的内容，但没有出现在场景中 – 我应该渲染的飞机只是变黑，没有任何错误…我在这里错过了什么？ 我也尝试了其他几种方式，没有任何成功 我尝试使用THREE.TextureLoader并使用jsdom（模拟document ， window ）和node-xmlhttprequest ，但随后出现load事件（event.target未定义…）的错误。就像本示例 应该如何解决这个问题呢？ 我有一个由Facebook生成的url ，我想从它下载图像，并将其放置在我的场景？

javascript：canvas上的图像（背景）

所以我的问题是我不能先画背景，然后在背景上画一切。 在我的代码中的一些地方（在循环function），它的工作原理，但在我的初始化函数不。 先介绍一下我的代码： 代码获取背景img并绘制它： function imgImport(imgName,ctx){ var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); }; img.src = 'client/img/' + imgName + '.jpg'; } module.exports = imgImport; 很酷，现在在我的初始化函数我使用上面的代码是这样的： // var img = new Image(); // img.src = 'client/img/spaceship.jpg'; // ctx.drawImage(img,0,0); Img('spaceship',ctx); drawGrayzonePlanets(ctx,serverObjects); 现在不要介意3条注释行。 第一个活动行Img（'spaceship'，ctx）：是通过nodejs使用的上述imgImport函数。 DrawGrayzonePlanets如下所示： function drawGrayzonePlanets(ctx,serverObjects){ for(object in serverObjects){ obj = serverObjects[object]; Drawobjects(ctx,obj); } […]

在Node.js中如何将multipart / form-data上传的图像转换为base64格式

我想让用户从本地文件系统中select一个图像，然后将这个图像渲染到页面上的一个canvas元素。 由于安全约束（'沙盒'浏览器安全模型），客户端javascript不能直接访问文件系统上的映像，因此必须从file upload控件中以“multipart / form-data”的forms往返服务器。 我不想实际上将这个图像保存在服务器上并提供，因为这只是一次性的客户端操作目的。 所以，我想知道是否有可能将服务器端的图像数据转换成可以发送回客户端的base64编码表示。 然后，我可以很容易地把它作为数据的URL，而不需要将图像保存在服务器上的任何地方。 或者，还有更好的方法？ 我在服务器上使用node.js。

使用node-canvas处理远程图像时出错：“给定的图像尚未完成加载”

我试图使用节点canvas来操纵存储在远程服务器上的图像。 我开始使用image-src示例并对其进行了修改，但无法使其工作。 这是我的代码： var fs = require('fs'), http = require('http'), url = require('url'), canvas = require('./node-canvas/lib/canvas'); var outCanvas = new canvas(1000, 750); var ctx = outCanvas.getContext('2d'); http.get( { host: 'farm8.staticflickr.com', port: 80, path: '/7108/7038906747_69a526f070_z.jpg' }, function(res) { var data = ''; res.on('data', function(chunk) { data += chunk; }); res.on('end', function () { img = new […]

是否有可能将一个正常的Javascript库转换成一个NodeJS库？

我一直在使用Javascript库，即canvas-lib ，我在服务器端使用Node.JS / Socket.io，所以我可以在客户端之间传递事件。 我正在使用一种架构，在该架构中，一次只有一个客户端可以控制canvas，因为我正在制作一种由移动设备控制并在第二个（更大）屏幕上显示的“划痕”游戏。 你可以在这里看到这个架构图。 事情是，目前的canvas交互是在客户端完成一个脚本的效果，这会导致一些问题： 没有办法缩放canvas 没有一个统一的时间限制柜台 我必须在外部屏幕上手动加载页面 我的目标是： 要让服务器将时间传递给两个设备（或屏幕） 要将canvas加载到移动设备上并缩放到外部屏幕（在新的连接上，并在移动设备连接后自动完成，或者排队并进入当前活动状态） 为了达到这个目的，我相信我必须得到canvas-lib才能在节点上工作，所以我怎么能实现这个，因为lib还没有准备好呢？ 如何将常规库转换为Node库？

错误：模块版本不匹配。 预计11，得到1

module.js:356 Module._extensions[extension](this, filename); ^ Error: Module version mismatch. Expected 11, got 1. at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/home/awd/html/node_modules/canvas/lib/bindings.js:2:18) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17)

如何捕捉canvas中的小变化，并将它们发送给所有使用该canvas的相互连接的用户？

我想让人们通过HTML5canvas沟通。 如果一个人画在canvas上，另一个人应该能够同时看到，而且是副诗。 我使用node.js作为具有express框架和socket.io的服务器。 有像.toDataURL和其他方法是将其转换为blob，然后发送它的方法。 但是这些方法将整个canvas转换成图像，然后通过websockets发送。 有没有一种有效的方式，我只能发送创build的新数据或在canvas上进行的更改，而不是创build一个图像，然后再次发送给所有用户？ 保持像素的轨迹是更好的吗？

结构js – 生成的图像中的对象的位置与canvas中的不同

我正在尝试使用Fabric js来生成一些带有文本的图像。 但由于某种原因，生成的图像中文本的位置与canvas中的不一致。 以下是canvas中的图像： 但生成的图像如下所示： 我给canvas的尺寸是881×640，与我给图片的输出尺寸相同。 这是我目前在我的代码中做的。 我从URL中将背景图像添加到canvas中。 但在此之前，我首先将图像的大小调整为与canvas大小相同： fabric.Image.fromURL(image_source, function(oImg) { oImg.width = canvas.width; oImg.height = canvas.height; canvas.add(oImg); }); 然后，我将canvas.toJSON()调用的string化结果发送给节点js服务器，以使用AJAX生成图像： $.post('http://host:1212', {'canvas': JSON.stringify(canvas.toJSON())}); 在服务器端，我加载对象并创build图像： var out = fs.createWriteStream(__dirname + '/uploads/' + file_name); var body = ''; request.on('data', function(data){ body += data; }); request.on('end', function(){ var request_params = qs.parse(body); //set to same size as the […]

绘制多个套接字实例以在移动（多人）上进行canvas和更新

计划 我决定开始尝试使用Node.js和Socket.io，然后开始制作一个游戏（或者只是一个大厅，将每个玩家画成一个块）。 每当一个客户端join时，服务器就应该接受这个类，并用服务器给出的玩家详细信息实例化一个新的对象（Random）。 然后，服务器将使用socket.io并将新对象发送到连接的客户端，以便他们可以拥有该对象，然后可以使用它（在这种情况下移动）。 客户端应该做的第一件事就是将所有用户绘制到canvas上，然后将当前客户端绘制到canvas上。 问题 我已经到了事情正在工作的地步，服务器做了一个新的播放器对象，然后发送给客户端，然后客户端将能够绘制自己的canvas与属性，但我似乎不能有客户端发送在其他用户的canvas上绘制，直到我移动播放器。 当我打开多个浏览器选项卡，然后按预期的方式工作，如下所示绘制客户端： 但是当我移动其中的一个，那么一个客户端会成功吸引到其他客户端，但是其他客户端都会失去那个时候给予他们的对象，直到他们移动，然后在其他地方顺利移动，但其他客户端都丢失屏幕状态，你可以看到他们所在的位置。 总之，他们都在屏幕上，并相应地移动到所有浏览器中的正确位置，但是当发生这种情况时，您从不会看到所有的玩家，而只会一次显示一个玩家，而且是一个移动的玩家（在您第一次join之后也只有看到自己，直到有人移动，但你看到所有的球员只有最后一次移动，直到有人或你移动）。 在下面查看图像 以上显示了我关注中间选项卡和移动，日志显示发生了什么（注意其他球员都消失了，只有移动的显示） 代码 我只有2个文件，我正在使用，他们填充如下。 服务器 – nodejs var express = require('express'), app = express(), http = require('http').createServer(app), io = require('socket.io').listen(http); http.listen(8000); //server connections and routing app.use(express.static(__dirname + '/public'), function(request, response){ if(request.url !== '/public') { response.sendFile( __dirname +'/error/index.html'); console.log('Error 404 request, User tried accessing: ' + […]

如何在Node.js中将图像发布到Twitter

当我尝试上传一个PNG图像到Node中的Twit库时，出现错误。 我试图在Node.js中制作一个生成随机RGB颜色的Twitter机器人，创build一个这种颜色的图片，并发布它。 在另外一个问题的帮助下，我现在知道如何在Node中创build一个canvas作为PNG，但是我不确定如何将它放到Twit库中。 使用下面的代码，我得到一个错误： 44, message: 'media_ids parameter is invalid.' 这似乎来自Twitter的API。 官方的Twitter文件说： 您可以上传文件的原始二进制文件或其base64编码的内容。 我不知道该怎么做。 我怎样才能让Twitter API接受我的canvas作为PNG图像？ 我的代码是： var Twit = require('twit') var Canvas = require('canvas'); var Image = Canvas.Image; var T = new Twit({ consumer_key: '###' , consumer_secret: '###' , access_token: '###' , access_token_secret: '###' }) //Generate the canvas var canvas = new Canvas(800, 800); […]