Tag: 节点canvas
最小化canvas“位图”数据大小
上下文：多用户应用程序（node.js） – 1个画家，n个客户 帆布尺寸： 650×400像素（= 260,000像素） 为了更频繁地更新canvas（我每秒思考10次），我需要保持尽可能小的数据大小，特别是在考虑上传速率时。 返回一个base64string的toDataURL()方法很好，但它包含了大量我不需要的数据（每像素23位）。 它的长度是8,088（没有前面的MIME信息），假设JavaScriptstring有8位编码，即8.1千字节的数据，每秒10次。 我接下来的尝试是使用JS对象来处理moveTo(x, y)或lineTo(x, y)等不同的上下文动作，并将它们发送到服务器，让客户端通过delta更新（通过时间戳）接收数据。 但是，结果是比base64string效率更低。 { "timestamp": 0, "what": { "name": LINE_TO, "args": {"x": x, "y": y} } } 它并不stream畅，也不准确，因为当你刷你的画笔时已经有近300条lineTo命令了。 有时会有一部分运动缺失（使一条直线而不是四舍五入），有时事件甚至不能被脚本客户端识别，因为它似乎已经被已经触发的大量事件“淹没”了。 所以我必须最终使用8.1 KB的base64string。 我不想担心这一点 – 但即使与增量更新asynchronous完成，实际服务器上也会出现严重滞后，更不用说偶尔带宽超限。 我使用的唯一颜色是＃000和#FFF，所以我只考虑一个1位的数据结构 ，只使用增量更新。 这基本上就足够了，我不介意任何“颜色”的精度损失（毕竟是黑色的 ）。 大部分的canvas都是白色的，你可以考虑额外的霍夫曼游程编码来进一步减小尺寸。 像一个尺寸为50×2像素的canvas，在（26，2）处的单个黑色像素将返回以下string： 75W1B74W （50 + 25白色像素，然后是1黑色像素，然后是24白色像素） 如果canvas由如下的1位string组成，那甚至会有所帮助： 00000000000000000000000000000000000000000000000000 00000000000000000000000001000000000000000000000000 这将有助于很多。 我的第一个问题是：如何编写一个algorithm来有效地获取这些数据？ 第二个是：我怎样才能将纯二进制canvas数据传递给客户端（通过节点服务器 ）？ 我怎样才能发送一个1位的数据结构到服务器？ 我需要将我的位转换为hex（或更多）的数字并重新parsing吗？ 有可能将其用作数据结构吗？ 提前致谢， […]
Javascript的.tiff库
有没有像canvas2image库（请看createBMP函数）在JavaScript（浏览器或nodejs）制作.tiff？
使用nodeJS的跨浏览器canvas没有find函数的签名
我试图在页面上创build一个canvas，每当用户在上面画一些东西时就会自动更新。 但是，看起来好像下面的一段代码（来自index.html）导致错误 socket.on("drawn_complete",function(data){ ctx.putImageData(data.image,0,0); console.log("Everthing worked technically"); }); 这是在我的控制台输出的错误： Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided 我的data.image是从以下代码返回的内容： ctx.getImageData(0,0,200,100); // ctx is canvas.getContext("2d") 这是我的canvas在我的HTML： <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> 这里是完整的节点JS： var http = require("http") var server = http.createServer(handler).listen(1337); console.log("Server created at 127.0.0.1:1337"); var […]
使用jsdom或Canvas获取Vibrant.js色板的node.js
我有一个使用jsdom或Canvas在node.js中获取图像的过程。 在下载过程中，我想在后端使用Vibrant.js提取色板。 下面的代码都不起作用。 使用jsdom const Vibrant = require('node-vibrant'); const request = require('request'); var jsdom = require("jsdom").jsdom; var window = jsdom().defaultView; var document = jsdom('<html><body></body></html>', { features: { FetchExternalResources : ['img'] } }); var imgDom = document.createElement("img"); imgDom.onload = function() { console.log('onload triggered'); // var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC'; // var imgData = imgDom.replace(/^data:image\/gif;base64,/, "") // var […]
NodeJS：服务于node-canvas生成的png
我想使用node-canvas生成并提供.png文件。 使用Express，这是我迄今为止所做的： draw_badge.js function draw() { var Canvas = require('canvas'), Image = Canvas.Image, canvas = new Canvas(200, 200), ctx = canvas.getContext('2d'); ctx.font = '30px Impact'; ctx.rotate(0.1); ctx.fillText('Awesome!', 50, 100); return canvas; } module.exports = draw; badge.js var express = require('express'); var router = express.Router(); var draw = require('../lib/draw_badge.js'); router.get('/show', function (req, res, next) { res.setHeader('Content-Type', […]
双人游戏 – 回合制游戏
我在这里有一个困境。 试图build立一个简单的基于回合的双人游戏，我一直在尝试Node.js和Socket.IO，正如我在一个问题中所见： 用Node.JS构build的多人游戏JavaScript游戏 – 分离玩家 这回答了我的大部分重大问题，但仍然很less。 因为我也build立了一个聊天室来testing它，它很好地工作。 但是，这种游戏真的有使用node.js的意义吗？ 可以用HTML5 WebSockets完成吗？
使用Uint8ClampedArray的Node.jscanvas实现
对于任何帆布专业人员 – 我需要帮助。 我正在使用节点canvas ，我试图使用它的getImageData方法获取imageData 。 不幸的是它返回： interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute CanvasPixelArray data; } CanvasPixelArray被弃用为Uint8ClampedArray 。 我的问题是： 有没有办法让getImageData返回Uint8ClampedArray或将CanvasPixelArray转换为Uint8ClampedArray ？ 如果情况并非如此，也许有人可以指向我的一些其他节点实现canvas？ 任何帮助将不胜感激，提前谢谢！
如何提交HTML5canvas作为表单发布的一部分？
我正在寻找stream图像数据从一个canvas标签到一个node.js服务器。 我可以自己处理服务器端代码，但是如何从canvas提交数据呢？ 我希望能够提供一个涉及多部分表单数据的build议，因为我想要传输数据，因为我期待50 MB左右的图像。 如果我试图一次性发布数据，它往往会崩溃客户端的浏览器。
通过VNC连接到Android模拟器
我们怎样才能连接到Android模拟器通过VNC与noVNC使用JavaScript的帮助？ 我想在我的浏览器上渲染模拟器。怎么做，谢谢
Node.js白板应用程序的客户端或服务器端HTML5canvas渲染？
我在想一个小白板Web应用程序将是一个很好的方式来提高我的node.js和JavaScript技能。 我在网上看过几个，这对于这种堆栈来说似乎是理想的。 不过花点时间思考一下，我想知道在这种Web应用程序中，客户端和服务器的angular色。 在节点canvas上陷入困境，我变得更加困惑。 什么，具体来说，客户端和服务器应负责？ 如果服务器能够渲染到canvas上，是否应接受并validation来自客户端的input，然后通过socket.io将其广播给所有其他连接的用户？ 通过这种方式，服务器保持一种主要的 -canvas元素。 一旦有新用户连接，服务器只需将其客户端的canvas推出即可 – 随时随地绘制所有画面。 任何有关实施的具体或哲学的指导，赞赏。 谢谢！
