• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序海报生成功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

如果是H5页面的话给大家推荐一款不错的插件html2canvas,这个插件可以将html元素转为canvas并一键生成png图片,但是本文的重点是在小程序上如何实现生成图片的功能。因为小程序没有DOM,所以不能引用插件实现。

进入正题!!

step1

创建canvas组件

注意:canvas画布绘制的图片会被压缩导致失帧,可以通过增大画布大小来提高图片质量。并且该canvas元素不应该呈现给用户观看,所以利用绝对定位将元素隐藏。

image标签是用来展示最终海报生成效果的

step2

获取页面画布元素

  

 

 

  因为canvas组件中的drawImage方法不接收网络图片地址,所以必须使用wx.getImageInfo将网络图片保存在本地缓存中,再通过drawImage将图片绘制在canvas画布上。

  注意:在这里的网络图片地址是需要在微信公众平台上设置域名白名单的。 

  step3

  到这里为止网络图片已经绘制在canvas画布上了,接下来就是将海报的效果图展示给用户并且保存到本地相册上。

 

 

  本次demo只是示范了如何将含有网络图片的页面绘制在canvas画布并生成海报展示给用户和保存在本地相册。实际项目需求肯定还有其他文字描述说明之类的信息,这就不在该文章的说明范围内了。毕竟官方文档上有对应API的使用说明。

最后附上完整demo代码

 

 

 

  效果图

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序基于swiper组件的tab切换发布时间:2022-07-18
下一篇:
小程序获取当前时间及获取当前日期发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap