uniapp开发小程序中将部分页面截取生成图片----最详细教程！！！

Posted 2023-03-08 DING_jq

这段时间开发中遇到了一个棘手的问题，就是用uniapp开发的小程序，将页面上的一块内容生成图片并保存在本地，这就难到我了，查了好久的问题，最终有了解决方法，废话少说，直接上步骤。

1、在HBuilder X的  插件市场  找到  前端组件--通用组件--搜索“(￣ー￣)p”，并导入到你的项目中

要注意：这个插件有兼容性

  2、封装一个组件，用来重新绘制你的页面

在页面上使用：

用法插件官网都有，在这里只说本人自己用的方法：JSON

 board：设置海报所需的 JSON 数据进行绘制

isCanvasToTempFilePath：把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。

custom-style：自定义样式

success：生成图片成功，这是一个监听函数，无需触发条件，可以直接得到生成图片的路径

这里的：

path ：是接受生成图片路径的变量

poster：对应页面中的board绑定的变量，用来绘制图片

 接下来说绘制页面：

可以封装一个函数，方便后续调用

setImg：这个就是用来绘制图片封装的方法，通过官方文档中的json写法将页面重新绘制，样式与css中的一样，但是写法上采用的是 驼峰式 

如果你的数据是需要从后端获取的，那就可以从父组件中将数据传过来，在子组件中接收然后直接渲染

绘制好以后就是生成图片了，调用页面中的success方法，里面的参数就是生成图片的路径。

3、在父组件中应用

 CardImg：是我的子组件

cardData：是我从后端获取的数据

success：接收子组件传递过来的图片的路径

需要用到图片路径，在data中定义一个变量，在子组件传过来的事件中直接给变量赋值即可。 

 这个插件有时候存在不生成的情况，不要慌！不是你的问题，随便在组件中打印一下然后重新编译即可。 小程序就是这么的不稳定。

有其他问题的小伙伴欢迎在评论区讨论~~~