Tag: 节点canvas

以高分辨率渲染HTMLcanvas图像: 我正在创build一个系统，用户可以在浏览器（在paper.js或processing.js等的帮助下）在canvas上创build一个图像，并能够打印一个大的（理想的A3,300dpi）尺寸表示他们在canvas上创造了什么。显然直接从用户浏览器中的canvas元素导出图像我只限于屏幕大小和分辨率等所以我已经研究了当用户保存并以较大的尺寸捕获图像数据时，立即放大canvas元素的解决scheme。这可能是一个解决scheme，但我很确定文件大小将很快失控，在较大的尺寸。我没有使用Node.js，但是想知道是否有经验的人知道Node是否可以实现这个目标，如果这将是一个更好的解决scheme，并简要介绍一下如何去做？

数组在node.js上作为string发送: 我正在做一些socket.io的实验。我有一个canvas，成功地发送数据到服务器收到罚款。它收到一个正确的Uint8ClampedArray，因为这是正在发送的内容。当我然后发送这个消息从服务器到客户端，我得到一个string：[对象对象]。我再次检查！我错过了什么，服务器的代码如下： var fs, http, io, server; fs = require('fs'); http = require('http'); server = http.createServer(function(req, res) { return fs.readFile("" + __dirname + "/front.html", function(err, data) { res.writeHead(200, { 'Content-Type': 'text/html' }); return res.end(data, 'utf8'); }); }); server.listen(1337); io = require('socket.io').listen(server); io.sockets.on('connection', function(socket) { socket.on('publish', function(message) { return io.sockets.send(message); }); });

toDataURL不适用于具有SVG图像的html5canvas: 我相信我的问题的答案可以在SVG的canvas的toDataURL方法有相当的？。有人可以确认或给我一个正确的方向指针。如果canvas包含Chrome和/或Safari上的SVG，则无法使用canvas.toDataURL（）生成正确的图像。下面的代码说明了这个问题。 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { var __readLocalXml = function(file) { xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET",file,false); xmlHttp.send(); return xmlHttp.responseXML; }; var __drawSVG = function(context, sourceSVG, x, y){ var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); var img = new Image(); img.src=""; var myFunction = function() { context.drawImage(img, x, y); […]

将canvas复制到canvas上: 将一个canvas（一台机器）复制到另一个canvas（另一台机器）的优化方式是什么？我知道下面的方法，但是我认为当canvas信息以很短的时间间隔发送时，会产生性能问题。 canvas.toDataURL("image/png"); 我听说过发送统筹信息。你们可以把它放在一些灯光？或者如果有更好的方法，那么请帮助我。

使用Node.js和EJS在canvas上绘制图像: 所以，我是Node新手，build立一个练习网站，用户可以在校园地图上的任何位置login并创build聊天室，或者join现有的聊天室。我有我的Mongo架构等工作。只是在按照我想要的方式渲染我的模型时遇到一些麻烦。基本上，我试图使用canvas先绘制地图，然后绘制所有现有聊天室的位置指针。这是我的控制器： var db = require('../models') module.exports = function(req, res) { // finds all the current chatrooms and passes them to the // the campus map to be rendered db.Chatroom.find().exec(function(err, chatrooms) { if (err) throw err; res.render('map.ejs', { title: "Campus Map", chatrooms : chatrooms }) }); }; 这是我的观点： <% include header.ejs %> […]

npm安装canvas：错误MSB4019: 我正在尝试为我构build的项目安装节点包。当我告诉node-package-manager安装canvas时，命令提示符显示下面的屏幕截图中的错误。我花了一个星期的时间试图弄清楚这一点。在大多数在线的地方，他们build议安装Visual Studio C ++和Cairo。我已经完成了安装Visual Studio快速版，并将开罗的内容复制到一个GTK文件夹。我也安装了node-gyp并更新了它，但是我仍然从命令提示符得到相同的响应。我也尝试使用这个代码npm install –msvs_version=2013 ，这个代码npm install canvas –msvs_version=2013 有什么我错过了吗？谢谢

Html5canvas“复合层”导致长帧: 我有一个运行在网页上的javascript客户端，使用requestAnimationFrame绘制到canvas，并通过websockets与我的NodeJS后端服务器（使用服务器端的'ws'模块）进行通信。通过使用Chrome开发工具进行分析，似乎脚本，渲染和绘制每个帧的时间合计最多只有几毫秒。然而，从20 – 40ms仍然有很长的框架。时间表显示，几乎在所有这些情况下，都有一个超过框架长度的“响应”和/或最终发生的“复合层” 。这基本上是我如何使用requestAnimationFrame ： function drawGame() { // Drawing to gameCanvas from cacheCanvas // cacheCanvas is updated whenever an update is received from the server ctx.drawImage(cacheCanvas, // source rectangle 0, 0, gameCanvas.width*2, gameCanvas.height*2, // destination 100, 100, gameCanvas.width*2, gameCanvas.height*2 ); requestAnimationFrame(drawGame); } requestAnimationFrame(drawGame); 服务器在60hz使用setInterval（）发送更新。当从服务器收到消息时，客户端立即绘制它。我怀疑这个时间与requestAnimationFrame结合可能是不正确的，并导致框架结尾的复合层。即便如此，我仍然对为什么在每一帧的脚本和“复合层”之间有太多的空闲时间感到困惑。所以… 有什么办法来控制什么时候“复合层”被称为？我应该保存每个更新消息中的数据，并且只在下一个animation帧的开头绘制它？ […]

添加并保存一个圆形蒙版框图像: 我想申请一个透明的圆形掩码来把png图片发送到我的node.js服务器; 这样我就可以在旧的浏览器和电子邮件客户端中显示圆形图片。我已经使用节点canvas来调整和裁剪我的图片，所以我想知道这种图片处理是否可以通过canvasAPI来完成。

无效的平台x64在Windows x64上安装node-canvas？: 我有一个问题在我的Windows机器上运行Windows 7 64位安装node-canvas 。我已经按照说明，我也试过用Visual C ++ Professional（试用版），但是也没有帮助。当我键入npm install canvas它给了我以下内容： npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET https://registry.npmjs.org/canvas/-/canvas-0.13.1.tgz npm http 200 https://registry.npmjs.org/canvas/-/canvas-0.13.1.tgz >canvas@0.13.1 install C:\wamp\www\node_modules\canvas >node-gyp rebuild C:\wamp\www\node_modules\canvas>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild Building the projects in this solution one at a time. To enable parallel build, please add the "/m" […]

canvas图像质量问题: 我试图模拟canvas中的background-size: cover属性。我得到了它的工作，但质量很差。这是一个小提琴。你可以比较这两个图像（缩小，所以你可以看到两个图像相邻）：我的代码如下所示： function drawImageProp(ctx, img, x, y, w, h, offsetY) { var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), newW = iw * r, newH = ih * r, cx, cy, cw, ch, ar = 1; if (newW < w) ar = w […]