这段时间开发中遇到了一个棘手的问题,就是用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中定义一个变量,在子组件传过来的事件中直接给变量赋值即可。 

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

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐