Tag: 节点canvas
Node.JSaudio混合+ MP3生成可能吗？
总之，我有一个网站，在客户端用户有一个“打击制造商”的应用程序。 用户可以打开/closures噪音，背景节拍等，基本上根据我在客户端的预定义的噪音，音调和曲调来创build他们自己的定制“歌曲”。 我需要以某种方式将他们正在制作的节拍（在HTML5canvas中）转换到我的服务器端（目前为Node.JS），并且将其创build的MP3吐出。 基本上我必须以某种方式让我的服务器端后端优雅连接+重叠+混合各种较小的MP3 / WAV文件成一个MP3文件，匹配在客户端创build的节拍。 然后我必须将该MP3返回到客户端进行下载。 任何人都能指出我正确的方向？ 就我的研究表明，由于手头问题的复杂性，这是不容易完成的或者根本不可能实现的（IE在项目的实际预算/时间限制内）。
使用图层和blendMode制作的Paper.js橡皮擦工具
我正在使用Paper.js和Node.js制作简单的绘图应用程序。 有2层： – 图像的底层 – 绘图的顶层。 带图像的图层是绘图图层的背景。 我想做一个简单的橡皮擦工具，它将清除path上的绘图。 我正在尝试在blendMode设置为“destination-out”的顶层添加第二条path。 drawingLayer.activate(); path = new Path(); path.strokeColor = 'black'; path.strokeWidth = 5; if (mode == "erase") { path.strokeWidth = 15; path.blendMode = 'destination-out'; } 我的问题是，这个“目的地输出”path不仅会删除顶层（绘图层）上的所有内容，还会删除底层（图像）上的所有内容。 当然，我希望图像保持不变的橡皮擦。 当我为我的页面设置一些CSS的背景时，它不会被橡皮擦path擦除。 你知道一个方法，使橡皮擦修改一个顶层，而不是底部层控制？
如何用Node.js保存图像（以base64编码的stringforms传入）
我在我的Meteor应用程序上创build了一个带有Phantom.js的HTML5canvas，我试图将canvas图像保存在磁盘上。 问题：保存的图像文件似乎已损坏（无法在图像查看器中打开）。 我从HTML5的Canvas.toDataUrl方法得到了一个base64编码的PNG图像。 这是我从Canvas.toDataUrl（）函数保存的输出如下所示：WzMyLDMyLDU4LDQ3LDEwOSwxMTEsMTAwLDExNywxMDgsMTAxLDExNSw0NywxMTksMTAxLDk4LDExMiw5NywxMDMsMTAxLDQ2LDEwNiwxMTUsNTgsNTAsNTYsNDksMTBd 这是我的保存程序： var buffer = new Buffer(JSON.stringify(CanvasString)).toString('base64'); var fs = Meteor.npmRequire("fs"); var fullFileName = fileName + '.png'; fs.writeFileSync(fullFileName, buffer, "binary"); 我可以使用文本编辑器（如上面的输出）将保存的图像作为明文进行查看。
nodejs：使用socket.io更新html5canvas白板
我正在尝试创build交互式白板应用程序。 我想要做的是，无论是在sender.html上绘制应更新receiver.html，但它是行不通的。 这是代码 – sender.html和iwb-sender.js var socket; function startSocket() { socket = io.connect(); } function sendData(coordx, coordy, actualColor) { var data = { x: coordx, y: coordy, color: actualColor }; socket.emit("iwb-message", data); } <!DOCTYPE html> <html> <head> <title>A web whiteboard</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><meta charset="utf-8"> <script src="https://cdn.socket.io/socket.io-1.3.2.js"></script> <script src="wb/wb-client.js" type="text/javascript"></script> <script src="iwb/iwb-sender.js" type="text/javascript"></script> […]
node-canvas：使用自定义字体
我想知道如何使用自定义字体与节点canvas。 这是我的尝试，但目前为止还不行： var Canvas = require('canvas') , Image = Canvas.Image , Font = Canvas.Font , path = require('path'); var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf')); function fontFile(name) { return path.join(__dirname, '../fonts', name); } function draw() { var canvas = new Canvas(100, 100) , ctx = canvas.getContext('2d'); ctx.addFont(gubblebum); ctx.font = 'bold 40 gubblebum'; ctx.fillText('test', 25, 45); return […]
用于Node.js的Canvas在本地工作，但不在Heroku服务器上
我正在使用Node.js的canvas包 。 它在我的电脑上工作正常，但是当我把它上传到我的Heroku服务器时，它不起作用。 通过“正常工作”，我的意思是正确安装与npm install canvas和Node.js应用程序正常工作的canvas包。 但是，当我尝试上传到Heroku，并试图build立canvas包，我得到的错误： $ git push heroku master Counting objects: 4304, done. Delta compression using up to 2 threads. Compressing objects: 100% (4028/4028), done. Writing objects: 100% (4304/4304), 3.57 MiB | 606.00 KiB/s, done. Total 4304 (delta 737), reused 0 (delta 0) remote: Compressing source files… done. remote: Building source: remote: […]
p5.js用椭圆canvas绘制path
我正在使用socket.io，node.js和p5.js实时绘制Web应用程序。 拖动鼠标时，我无法创build平滑的线条。 如果鼠标拖得太快，则每个椭圆之间都有一段空的空间。 这里的最终目标是创造一条平坦的道路。 以下是我迄今为止所尝试的内容： 尝试1： noStroke(); fill(lineColor[0],lineColor[1],lineColor[2]); ellipse(mouseX, mouseY, lineThickness, lineThickness); 尝试2： strokeWeight(lineThickness); line(mouseX,mouseY); stroke(lineColor[0],lineColor[1],lineColor[2]); 下面是一个问题的画面： canvas绘制不完整的path图像 欢迎任何反馈意见; 谢谢！
如何将图像渲染为pdf（canvas和pdfkit）
我有一个nodejs的function，从许多图像生成一个图像，然后从中生成一个PDF文件。 我试图只有一个图像，但我需要添加更多，但这似乎并没有工作 function HelperHandler() { this.pdf = function(req, res, next) { var doc = new PDFDocument; mergeImages(function(err, image) { if (err) return res.json(err); doc.image(image, 100, 100); doc.output(function(string) { res.contentType = "application/pdf"; res.send(string); }); }) } } var mergeImages = function(callback) { var Canvas = require("canvas") , fs = require("fs"); fs.readFile(global.root_path + "/images/bg.jpg", function(err, data) { […]
node-canvas在Node中工作，但在PhantomJS中需要时会失败
我有一个PhantomJS应用程序，我想从JS驱动页面（通过page.renderBase64('PNG') ）获取一系列截图，然后将这些截图page.renderBase64('PNG')到GIF中。 据我所知，Node中没有办法用纯的base64string来构buildGIF，我真的不想把每一帧写到磁盘上，然后到Node外面用ImageMagick或类似的东西把它们缝在一起这会大大减缓这个过程。 所以我的计划是将base64图像绘制到canvas上，然后将canvas添加到Node GIF生成器。 虽然我可以在节点环境中使用node-canvas ，但是在我的Phantom脚本中包含require('canvas')时，当我启动一个新的Canvas对象时，吐出了缺less依赖关系时常见的错误： Error: Cannot find module './lib/node-canvas/build/Release/canvas' phantomjs://platform/bootstrap.js:299 in require phantomjs://platform/bootstrap.js:263 in require 我想，问题的一部分就是Phantom正在不同的环境中运行Node，而不是所有的依赖都不存在。 但是我不太了解Node和PhantomJS在执行Javascript方面的不同。 我不清楚什么是phantomjs://platform/bootstrap.js是否是我可以扩展的东西。 为了清楚起见，我正在使用Phantom-Node桥，在那里我用var page = require('webpage').create(); 。 然后我使用phantomjs从命令行执行脚本。 TL; DR：从PhantomJS脚本中需要基于C ++的Node模块node-canvas，它会失败，从Node运行时不会失败。 环境如何不同？ 为什么一些Node模块工作而其他模块却不工作？ 更新：我知道我可以在由Phantom渲染的页面上创build一个<canvas>元素并使用它，但是这需要在页面的沙箱化JS和页面之间来回耗费大量时间脚本本身。
在python服务器上构build来自Fabric.js JSON的图像
使用python，是否有可能从fabric.jscanvas的json表示重构图像？ 使用Node.js很容易，但是我使用的是django，所以我不想运行一个单独的node.js服务器来创build这些映像，将它们发送到我的django服务器。
