前言

image.png

image.png

接下来我来对powernice 技术实现和功能做一个介绍.

背景

demo演示

技术选型

功能盘点

2. 多主题

目前支持2套主题, 浅色和深色, 主要从用户体验的角度方便用户夜间写作. 效果如下:

1. 深色
2. 浅色

3. 支持一键导入导出

为了提高我们的写作效率以及对文章的多路复用, 我们提供了一键导入导出文件等功能, 具体如下:

使用截图如下:

下载的html内容预览如下:

还原度还是非常高的~

4. 多模式预览

多模式预览主要是右侧的预览区, 我们支持手机端预览和pc端预览, 如下图:

5. 字数行数统计

6. 文章管理

核心技术实现

1. 导入导出多类型文件

核心代码如下:

2. 基于浏览器指纹识别技术的用户识别

浏览器指纹这块知识点涉及的比较多, 笔者这里简单介绍一下canvas指纹.

?

「Canvas指纹」是利用系统之间, 字体渲染引擎, 抗锯齿、次像素渲染等处理方式的差异而实现的一种指纹识别技术. 我们使用canvas将同样的文字转成图片, 即便使用Canvas绘制相同的元素，但由于上述的差别得到的结果也是不同的。

?

所以我们可以利用以上技术, 对不同用户浏览器进行识别, 从而区分用户(虽然存在概率事件), 实现无需登录就能保存对应内容的目的. 基本实现代码如下:

大家也可以参考此方法来设计自己的指纹识别方案.

在线体验: 传送门

最后

?

觉得有用 ？喜欢就收藏，顺便点个「赞」吧，你的支持是我最大的鼓励！持续分享更多有趣的H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战.

?