很好用的后台直接可视化编辑海报，小程序前端显示

首先贴上原作者地址：https://juejin.im/post/5d8b20ba51882509615bca09

大致思路就是后台通过painter-custom-poster该插件实现可视化编辑然后生成一段json代码，然后小程序端则接收json代码后再通过小程序端的工具Painter绘制这段json代码生成图片。而后台系统也可以根据这段json代码导入进行整体海报的修改，也可以自己自己存入几个模板，直接使用，具体请看原作者文章

这里在作者源代码基础上修改了部分代码，修改了添加图片可本地直接上传，添加了常用属性值备注等方便运营人员使用，添加了types字段，然后通过给元素添加该字段后端再拿到这段代码根据types进行替换处理，就可以动态的给海报添加图片头像昵称二维码等

虽然功能很强大，但是在接入过程中也遇到一些问题，说一下将该项目放入公司后台时，中途主要遇到的几个问题
首先是原作者的react项目下载下来后通过npm安装启动时报错，然后执行这句解决了

然后在修改工具代码添加types字段和修改其他地方时花了一段时间去理解源代码、再然后因为原项目后台是用的vue写的，不能直接往里面放，所以想到的解决方法就是将工具放到另外个地址，然后通过iframe引用

最后是在成功将工具修改放入后台后，不知道是工具本身还是在修改时造成的，偶尔会出现在可视化界面添加图片后再修改宽高会报错然后页面崩掉，需要重新刷新，然后还有一开始照着作者说的将生成图片质量改为了0.2之后虽然生成海报快了但是海报的质量会特别低，所以建议最好还是不要改，或者改成其他数值

贴一张效果图

放上修改之后的工具

链接: https://pan.baidu.com/s/17vsDaQxWHYsD12o26AF8Lw 提取码: 3dxw
链接: https://pan.baidu.com/s/1JyWxFBn6kyXBubDxZlP4vg 提取码: 6aq9