需求: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目前发现的坑就是点击生成图片后,原有编辑器的区域滚动条消失了,导致想修改的话没法滚动,
个人理解这个原因:正常情况下,截图无法截取到滚动条可见区域以外的部分,为了截取全部,就取消了滚动条,并且溢出隐藏了,所以出现这种情况。
不过不要慌,代码里面我已经做了相应处理,就是生成之前给个提示 “ 点击生成图片后,编辑器将置空,是否确认? ”,感觉这样子交互就友好多了!
好了,先写这么多,有问题可以评论交流。
posted @
2023-11-15 09:20
飞翔的蜗牛~
阅读(
381)
评论()
编辑
收藏
举报