富文本编辑器的内容转换成图片

需求:pc端通过富文本编辑器,编辑商品详情页,然后生成图片,用于移动端展示之用。

用到的库:wangEditor5和Dom-to-image(后者没找到官网,使用方法可自行百度,相关博客还是比较多的)

常规科普:

  1.wangEditor 编辑器绑定的valueHtml即为字符串形式的dom结构。我们解码后可直接预览效果;

  2.利用dom-to-image库实现dom到图片的转化,顾名思义。(本来选的是HTML2cancas 库,但是截图白边问题,图片无法自适应问题,缩放无法使用等等,

   快把人搞崩溃了,所以换了dom-to-image这个库,当然也有坑,后面再说。。)

 

我自己写了一个demo。放在我的码云里了,需要的小伙伴请自行下载,如果对你有帮助,欢迎star,fork或评论。

地址:https://gitee.com/okwufeng/rich-text-editor.git

ps: dom-to-image目前发现的坑就是点击生成图片后,原有编辑器的区域滚动条消失了,导致想修改的话没法滚动,

个人理解这个原因:正常情况下,截图无法截取到滚动条可见区域以外的部分,为了截取全部,就取消了滚动条,并且溢出隐藏了,所以出现这种情况。

不过不要慌,代码里面我已经做了相应处理,就是生成之前给个提示 “ 点击生成图片后,编辑器将置空,是否确认? ”,感觉这样子交互就友好多了!

好了,先写这么多,有问题可以评论交流。

posted @ 2023-11-15 09:20  飞翔的蜗牛~  阅读(381)  评论(0编辑  收藏  举报
Live2D