半吊子伯爵的博客

3）当阅读器要使用H5时，首先用express启动一个WEB服务器，同时将课本目录ZIP解密并用Jszip装载，然后在阅读器中用iframe加载WEB服务器首页（比如访问index.html），服务器监听到请求后，从jszip对象中取出对应的文件返回即可；当阅读器播放音频视频的时候，首先读取到文件的Buffer数据（加密），然后对其进行解密得到新的Buffer数据，最后将其转换成blob地址并交给video标签或audio标签播放即可。资源加密，其实就是对正常文件进行破坏，只要用的时候有办法恢复就行。

为方便U盘制作者，编写了一个小工具，该工具也是用Electron开发的（nodejs环境），没有直接获取磁盘物理ID的API，需要使用child_process模块执行DOS命令来获取。3）既然上述步骤需要校验磁盘物理ID，就必须在程序中预设U盘ID，此处使用一个单独的加密文件(disk.disc)来存储敏感信息，当启动程序时，在内存中解密该文件数据来使用。1）当启动程序时，获取到程序所在磁盘的物理ID，然后与程序绑定的ID做对比，相等则通过，不相等则直接关闭程序；框架：Electron。

上文示例中我只是把指定文件拷贝到当前目录，更多便捷操作可以自行编写相应脚本实现。

工作中遇到一个需求：写个nodejs脚本，对word文档（1000+个）的目录页面进行美化。实现过程遇到不少麻烦，在此分享下。

网站只是用插件单页展示PDF文件，功能简单，在官网提供的插件包里也有只渲染单页的示例代码，稍加改动后即可使用，但实施过程中发现有许多坑，于是想找官方文档，费了好一番功夫才找到一个中文文档，但发现里面也没有详细的参数配置说明，所以只能自行摸索。在控制台可以看到PDF的尺寸闪烁是因为每次翻页时都会重新计算宽度，而当某次因为某些原因产生滚动条后，滚动条会压缩网页的有效宽度，那么下次翻页时计算的宽度就会偏小，于是又会出现间隙（如图所示，间隙大约8px，默认的滚动条宽16px，所以大体可以猜到原因）。

在上面这段代码中，需要注意的是：录音结束后的回调函数是放在handleDataAvailable中的，这是因为当mediaRecorder.stop()停止录制后，会再出发一次dataavailable事件，然后才把最后的数据分片存储到recorder中。2）然后，用户可以选择为某一个角色配音，假如选择为A配音，那么视频在播放到A的位置时会静音，并录制用户的声音。3）最后，将用户的录音替换到视频中，并生成新的视频文件，后续上传服务器。1）首先，前台会拿到一个英语视频，视频的内容是A和B用英语交流；

开发“连线题”并没什么难点，这里主要分享的是：实现过程中的一点点布局设计上的小心思。想要的效果大体长这样（如下图所示）：乍一看似乎需要获取每个元素的位置信息、计算连线的端点坐标，似乎很繁琐，而且每次页面尺寸变化时，都得重新计算。其实，事情可以比想象中简单很多…

1）参数设置的input标签建议type设置为number，这样用户可以按键盘上的上下箭头来调整数字，结合vue，可以即时看到文字排版效果；2）svg中标签的style属性和html中存在差异，不支持transform（svg中的transform是单独的属性）。如果想用纯CSS对文字做动画，能操作的只有：font-size、font-style、font-weight、text-shadow、fill等。

首先，微信小程序向web-view传递数据一般通过地址栏传参的形式（给src赋值或者修改hash），这样一般就已经能够满足实际开发需求了，所以这里主要探讨web-view向微信小程序传参。

在使用pdf.js获取PDF文本时，发现有部分文件获取不到文本（另：vue-pdf依赖于pdf.js，所以也会出现这个问题）。此时，控制台其实给出了警告提示信息，只不过是用console.log打印的，容易被忽视。字体加载过程中发生错误：必须指定CMap的“baseUrl”参数，请确保提供了“cMapUrl”和“cMapPacked”API参数。PDF文档中包含有pdf.js不支持的字体格式。

自定义协议传参中的“#”问题

在一个Electron项目中需要调用海康网络摄像头，经调研，摄像头需要本地安装相关驱动，并在程序中加载摄像头提供的SDK，然后通过SDK提供的方法调用本地驱动来执行想做的操作。这里我使用官网提供的 WEB SDK 来进行开发（没有直接为Electron或Nodejs提供服务的SDK）。

CSS - 镂空文字方案比对

Electron中的打印功能有以下几种方式：webContents的print和printToPDF方法、webview标签的print和printToPDF方法、iframe的print方法。关于print方法，webContents、webview和iframe都是调用的浏览器自带的打印功能，虽然Electron文档中罗列了很多打印配置项，但实际使用时看不到实际效果，打印的最终效果也较差。而printToPDF方法效果就好很多。

Polyv视频下载

之前有网友提出，想要用代码监控一个接口，定时访问它，如果接口返回值发生某些变化就提醒用户。于是，我写了个简单的脚本。脚本编写时，考虑的是放在目标网站的控制台来执行。之所以这样做，是因为如果放在页面外部执行，往往需要补环境，费时费力。

Gitee Pages部署失败 错误信息: 文件可能包含违禁违规内容，请排查调整后再行重试。

解决两个报错“商家参数格式有误，请联系商家解决”和“403 net::ERR_ABORTED”

有的网站中有ShadowDOM节点，对于这种节点，直接在控制台使用元素选择器是无法获取到的。那怎么获取呢？这里结合ShadowDOM的特性分“shadow-root(open)”和“shadow-root(closed)”两种情况。

原生JS版本的端口扫描器，相关方法早已存在，只是比较冷门，也缺乏汇总。这里整理了网上搜集到的两种方法。

稍微想一下，应该可以得出一个思路：水印图的透明度为0.7，意味着它的色值在结果图中占的比重是70%，原始图因为被水印图遮挡，所以占的比重是剩余的30%。为了便于分析原理，我写了一个简单的Demo，如下图所示，在Demo页面中有三张单色图片，第一张原始图是颜色为#999的灰色图片，第二张水印图是颜色为#fff透明度为0.7的图片，第三张结果图是前两张图片合成以后得到的图片。经测，常见的水印可以正常去除；接下来，对比下三张图片数据有何不同，原图片和水印图的数据是怎么得到结果图的数据的？

因为疫情原因，如今远程办公的需求越来越普遍，为了人们工作生活的协同便利，实时音视频的服务正被各行各业广泛需要。腾讯云提供的实时音视频服务恰好解决了这一需求。

CSS - 不规则图形进度条的实现方法

编写直播视频下载工具

加密流媒体下载

适用场景：直播时可免费观看，但回放收费。若用录屏软件录屏，磁盘占用又太大。

网页禁止复制文本、禁止文档下载的实现原理和解除办法。