富文本编辑器的内容转换成图片
发布时间 2023-11-15 09:28:29作者: 飞翔的蜗牛~
需求：pc端通过富文本编辑器，编辑商品详情页，然后生成图片，用于移动端展示之用。
用到的库：wangEditor5和Dom-to-image（后者没找到官网，使用方法可自行百度，相关博客还是比较多的）
常规科普：
1.wangEditor 编辑器绑定的valueHtml即为字符串形式的dom结构。我们解码后可直接预览效果；
2.利用dom-to-image库实现dom到图片的转化，顾名思义。（本来选的是HTML2cancas 库，但是截图白边问题，图片无法自适应问题，缩放无法使用等等，
快把人搞崩溃了，所以换了dom-to-image这个库，当然也有坑，后面再说。。）
我自己写了一个demo。放在我的码云里了，需要的小伙伴请自行下载，如果对你有帮助，欢迎star，fork或评论。
ps: dom-to-image目前发现的坑就是点击生成图片后，原有编辑器的区域滚动条消失了，导致想修改的话没法滚动，
个人理解这个原因：正常情况下，截图无法截取到滚动条可见区域以外的部分，为了截取全部，就取消了滚动条，并且溢出隐藏了，所以出现这种情况。
不过不要慌，代码里面我已经做了相应处理，就是生成之前给个提示 “ 点击生成图片后，编辑器将置空，是否确认？ ”，感觉这样子交互就友好多了！
好了，先写这么多，有问题可以评论交流。