如何用Vue制作一个像素绘板

本篇内容介绍了“如何用Vue制作一个像素绘板”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！技术栈[vue + vuex + vue-router] 页面渲染 + 数据共享 + 路由跳转[axios] 以 Promise 的方式使用 HTTP 请求[stylus] CSS 预处理[element-ui] UI 库[Webpack] 打包上面这些东西[koa 2 & koa-generator] NodeJS 框架和框架脚手架[mongodb & mongoose] 数据库和操作数据库的库[node-canvas] 服务端数据副本记录[Socket.io] 实时推送[pm2] Node 服务部署[nginx] 部署静态资源访问服务（HTTPS），代理请求[letsencrypt] 生成免费的 HTTPS 证书Webpack 之所以也被列出来，是因为本项目作为项目 luwuer.com 的一个模块，需要 webpack 来实现独立打包
node-canvas
安装
node-canvas 是我目前遇到过最难安装的依赖，以至于我根本不想在 Windows 下安装他，它的功能依赖很多系统下默认不存在的包，在 Github 上也能看到很多 issue 的标签是 installation help。以 CentOS 7 纯净版为例，在安装它之前你需要安装以下这些依赖，值得注意的是 npm 文档上提供的命令没有 cairo 。
还有一个不明所以的坑，如果前置条件准备就绪后，安装本体仍然一直卡取包这一步（不报错），此时需要单独更新一下 npm
使用示例
参考文档很容易就能掌握基本用法，下方例子中先取到像素点数据生成 ImageData ，然后通过 putImageData 把历史数据画到 canvas 。
Socket.io
本项目在设计上有两个必须用到推送的地方，一是其他用户的建点信息，二是所有用户发送的聊天消息。
client
server /bin/www
letsencrypt
申请证书
自动续期
nginx
/etc/nginx/config.d/https.conf
附录
数据库存储结构思考历程
首先需求是画板可以作画实际大小为 { width: 1024px, height: 512px } ，这就意味着有 1024 * 512 = 524,288 个像素点，或则有 524,288 * 4 = 2,097,152 个表示颜色的数字，这些数据量在不做压缩的情况下，最小存储方式是后者剔除掉 rgba 中的 a ，也就是一个长度为 524,288 * 3 = 1,572,864 的数组，如果赋值给变量占用内存大概 1.5M （数据来源于 Chrome Memory免费云主机域名）。为了存储以上结构，我首先分了两种类型的存储结构：以点为对象存储，也就是说会有 524,288 条数据颜色 rbga 存储，后优化为 rgb 存储颜色 16 进制存储整个画布数据当作一条数据存储虽然看起来结构2有点蠢，但起初我确实思考过这样的结构，那时我还不清楚原来取数据最耗时的不是查询而是 IO 。
后来我分别测试 1.1 和 1.2 这两种结构，然后直接否定了结构 2，因为在测试中我发现了 IO 耗时占总耗时超过 98% ，而结构 2 无疑不能因为单条数据取得绝对的性能优势。1.1存储大小 10M取出全部数据 8000+ms全表查询 150ms （findOne 和 find 对比结果）其余耗时 20ms （findOne 和 find 对比结果）1.2存储大小 10M取出全部数据 7500+ms全表查询其余耗时结构 2 如果取数据不是毫秒级，就是死刑，因为这种结构下单个像素变动就需要存储整个图片数据
老实讲这个测试结果让我有些难以接受，问了好几个认识的后端为什么性能这么差、有没有解决办法，但都没什么结果。更可怕的是，测试是在我 i7 CPU 的台式电脑上进行的，当我把测试环境放到单核服务器上时，取全表数据的耗时还要乘以 10 。好在只要想一个问题久了，即使有时只是想着这个问题发呆，也总能迸发出一些莫名的灵感。我想到了关键之一数据可以只在服务启动时取出放到内存中，像素发生改变时数据库和内存数据副本同步修改，于是得以继续开发下去。最终我选择了 1.1 的结构，选择原因和下文的“数据传输”有关。
index 代替 x & y 以及移除 rgba 中的 a 在代码中再补上，都能显著降低 collection 的实际存储大小
在测试过程中其实还有个特别奇怪的问题，就是单核小霸王服务器上，我如果一次性取出所有数据存储到一个 Array 中，程序会在中途奔溃，没有任何报错信息。起初我以为是 CPU 满荷载久了导致的奔溃（top 查看硬件使用信息），所以还特意新租了一个服务器，想用一个群里的朋友提醒的“分布式”。再后面一段时间，我通过分页取数据，发现程序总是在取第二十万零几百条（一个固定数字）是陡然奔溃，所以为 CPU 证了清白。Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。“如何用Vue制作一个像素绘板”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: JavaScript如何实现显示函数调用堆栈

本篇内容介绍了“JavaScript如何实现显示函数调用堆栈”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Firebug提供了console.trace()来显…