Vue+Koa2+mongoose写一个像素绘板的实现方法写一个像素绘板的实现方法
前言前言
GitHub: server | 前端
为什么是绘板:v2ex
作为一名前端,总会有意无意接触到 NodeJS 、有意无意会去看文档、有意无意会注意到框架,但真当需要我们需要在工作
中善用它时,多半还是要感叹一句“纸上得来终觉浅”。所以一周前我决定进行一个实践尝试,希望能把以往无意中学到的知识
融汇贯通,最终选择把以前的一个画板 Demo 重写并添加 server 端。
技术栈技术栈
[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 。
# centos 前置条件
sudo yum install gcc-c++ cairo cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
# 安装本体
yarn add canvas -D
还有一个不明所以的坑,如果前置条件准备就绪后,安装本体仍然一直卡取包这一步(不报错),此时需要单独更新一下
npm
使用示例使用示例
参考文档很容易就能掌握基本用法,下方例子中先取到像素点数据生成 ImageData ,然后通过 putImageData 把历史数据画
到 canvas 。
const {
createCanvas,
createImageData
} = require('canvas')
const canvas = createCanvas(canvasWidth, canvasHeight)
const ctx = canvas.getContext('2d')
// 初始化
const init = callback => {
Dot.queryDots().then(data => {
let imgData = new createImageData(
Uint8ClampedArray.from(data),
canvasWidth,
canvasHeight
)
// 移除 Smooth
ctx.mozImageSmoothingEnabled = false
ctx.webkitImageSmoothingEnabled = false