博客封面生成-记一次修复Bug并新增功能的PR

type

status

date

slug

summary

1、寻找原因

首先当然是访问此项目的代码代码仓库

拉取到本地打开

npm install

npm srart

使用Webstorm开启debug模式运行

找到出现错误的代码部分：src/components/ComponentToImg.js 第29行开始

通过将继续Debug得知，此错误是在dom-to-image 依赖包中产生的，通过搜索得知，此依赖包专注于对 DOM 元素转换为对象，我们的底纹时svg格式，所以在转换过程中会出现错误。由于内部代码复杂，我便放弃了修改dom-to-image源码的想法。

2、解决问题

首先查看 github 仓库中的 Issues 发现没有人反馈类似问题，那就自己解决。

通过Debug得知，问题代码中的最后得出的data是一串base64字符串。通过搜索，知道还有一个依赖包html2canvas可以将html转换成图片。

查看依赖的文档，发现他同样可以将html转为base64 ，新代码如下：

最后运行代码，测试有底纹的图片可以正常下载，但是文字会向下偏移，造成显示不完整。于是通过查阅资料得知，我需要使用html2canvas-1.0.0-alpha.12版本。切换版本后完美支持。

3、新增复制功能

在查阅Issues时，看到有人想要直接将图片复制到截切版的功能，我觉得我也需要，所以我就随手添加了此功能。

首先找到下载按钮，复制其并改成复制的字样，设置点击事件copyToClipboard因为复制图片也需要转成base64，所以我们将上方获取base64的代码提取出来：

然后是将base64转图片复制到剪贴板的代码：

运行项目，发现有复制按钮且功能正常。

4、新增读取剪贴板

我能使用过程中可以发现，有两个主题可以自己上传图片作为封面元素，但是每次都要从文件中选择，而我们很多时候都是想把截图粘贴进去。

Debug发现，src/components/Themes/PreviewTheme.js是其中一个主题文件，其中由image属性控制图片的显示，其值是一个blobURL，所以我们需要将剪贴板中的图片转成blobURL 。同样的，我们在选择文件的下方添加一个button，可以复制下载按钮。修改其点击事件为setImage(readClipboard)，其中readClipboard：

如此便实现了读取剪贴板到html中。

5、细节增加

修改默认主题，省的手动修改主题

增加底纹选项，可以手动选择底纹

修改随机按钮到第一页

修改自定义图标选项到第一个

翻译为中文

6、第一次PR代码

这是第一次修改他人的代码并进行PR操作，值得纪念，虽然不知道作者何时能够查看我的请求。

首先push代码，然后再仓库页找到Pull request ，然后点击New pull request

选择仓库和分支：

点击Create pull request，然后填写相关信息

点击Create pull request ，等待作者回应即可。

1、寻找原因

2、解决问题

3、新增复制功能

4、新增读取剪贴板

5、细节增加

6、第一次PR代码

Rainvice

交流频道

加入我们的社群讨论分享