使用ivx画布组件打印微信头像的经验总结

在案例中经常需要实现这样一种功能,我们先获取到用户的微信头像,然后给用户的头像添加一些装饰的图案并制作出一张新的图片,最后还可以让用户下载下来作为自己的微信头像。今天就结合“给我一面小红旗”这个demo讲一讲这种案例该如何实现。


1.首先搭建一个比较简单的界面,主体是一个画布,在画布里添加两个图片组件,一张用来显示当前用户的头像,另一张小图就是展示小红旗。


还需要添加一个横幅,横幅里面放置一个图片组件用来展示最终合成的图片。这里图片1的素材资源地址与文本变量“打印的图片”进行数据绑定,到时我们直接将合成图片的URL地址赋给这个文本变量即可。要注意的是将图片1的长按保存属性打开,这样在手机中长按才能出现保存图片的界面。



2.然后我们给后台添加一个用户组件,它的作用是发起微信公众号登录,在登录的回调中可以获取当前用户的信息,包括头像昵称等。要注意的是在案例的配置中开启微信公众号的授权,初始获取头像昵称选择“是”,还有填好配置名称(随意填一个即可)。




3.接下来就是制作红旗头像的事件,在点击事件下我们先让用户组件发起微信公众号登录,将登录结果中头像的值赋给文本变量“头像”(登录结果中头像的值其实是该头像图片在服务器上的URL地址,这个地址本身是一个字符串)。再将画布中的头像图片的素材资源地址设置为文本组件的值(因为画布的特殊属性,其内部的组件不能进行数据绑定)。



最后就是打印画布了,这时画布会把它的全部内容打印出来生成一张图片,在回调里我们获取的参数“打印的图片”就是打印出来图片的URL地址,我们把它赋值给文本变量“打印的图片”,再让横幅显示,现在用户就可以看到合成结果并长按横幅中的图片保存到手机里了。



总结

画布的打印功能除了可以用于制作头像,还经常用于制作海报,可以让用户自行设计内容、添加修改信息等,最后把画布打印出来生成用户自己的专属海报。不过有一点要注意,画布只是打印画布内的组件,比如下图这种情况,虽然视觉效果上按钮在画布里,但是对象树中按钮并不在画布内,打印画布的结果是没有这个按钮的。另外就是画布打印出来的图片宽高是和画布一样的,如果我们要把它赋值给一个图片组件,那么至少图片组件的宽高比例要和画布的比例一致,否则会出现变形的情况。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,042评论 0 15
  • realfranker阅读 366评论 4 6
  • 从接触蒙氏以来,对她的工作材料都会持有一种态度,严谨性、科学性、系统性。这可能和蒙台梭利女士的医学背景有很大的关...
    普瑞姆Lucy阅读 651评论 0 0
  • 过往的桃花, 未曾有今年般柔心,今年般动意 以往只是觉得桃花盛开可以开心爬树吃桃子 像个孙猴子一样吃个饱, 桃核还...
    风吹了泡沫阅读 174评论 0 0
  • 使用npm包时会遇到A包依赖B包,C包也依赖B包,于是存在安装了两个B包的情况。而当A、C两个包依赖的B包版本要求...
    砂壶阅读 5,731评论 0 2