参考文章： 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://blog.csdn.net/YouZi_X/article/details/107339893?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_aggregation-13-107339893.pc_agg_rank_aggregation&utm_term=%E4%BD%BF%E7%94%A8Painter%E4%B8%ADonimgok%E6%B2%A1%E5%8F%8D%E5%BA%94&spm=1000.2123.3001.4430\

最初绘制海报时是准备用canvas绘制，但是绘制方法过于复杂，超出了我的能力范围，尝试百次也不能呈现绘制的图片。 于是在我不断利用引擎搜索的努力下，找到了大佬设计的painter插件，比较方便，并且有了成果。

这个功能花了我一整天时间，在此做笔记，并分享给和我碰到相同困难的朋友。

过程中先使用了简书文章中大佬的方法，图片内容的获取没问题，可是不论如何都无法正确引入painter插件，无法生成图片。 然后花了半天时间查找适合我引入painter插件的方法，经过测试，在第二篇CSDN大佬文章中完成了图片的生成。

下面直接开始整套方法，结合两篇文章，省略掉不必要的操作。

不同插件出现的位置不同，此时，我拉取的paiter包出现在了我的项目根目录： 如果网络不好或者不能使用git，可以手动下载： https://codechina.csdn.net/mirrors/shesw/Painter/-/tree/master/components/painter 由于项目机制的原因，部分引用方法无法引用static外的文件，所以我们将painter复制到static文件夹下（最主要的就是painter文件包，其他的都没用了）： 大家跟着我的标注走就好，不要被标注以外的地方干扰。

就是这一步耗了我半天时间。 uniapp以微信小程序合适的方法引入插件，按道理说方法有很多，有的插件可以有的却不行，方法我一直模糊不清，这个方法成功了：

另外，main.js主文件中同样引入，才可使用：

（1）绘制图片 开发插件的大佬顺便为我们设计了绘图网站，我们在内部绘制好图片，将代码复制下来即可： 绘图网站https://lingxiaoyi.github.io/painter-custom-poster/ 我是直接上传了张海报样式的图片，进行测试。 然后将代码赋值到绘制页面旁边的card.js文件中，大家放到哪里都行，只要可以正确引入即可： 然后在绘制页面中引入card.js： （2）在绘制页面中引入painter插件 此时，就可以使用painter插件了：

（3）利用方法函数进行插件的操作 methods:

以上，进入页面即可成功渲染图片。 后续操作，如v-show大家自行改动。

忽略card.js，直接将代码复制给template，动态引入图片地址即可： 大家可以在图片布局网站中将海报设计好，然后再页面中替换即可。 没有新建项目给大家讲解，我怕有缺漏，如果大家无法实现，有任何问题欢迎留言，我会对自己的文章负责0_0！

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————