美文网首页
公众号开发,base64图片,在微信页面中不显示的问题

公众号开发,base64图片,在微信页面中不显示的问题

作者: 谢顶强 | 来源:发表于2021-11-11 17:37 被阅读0次
需求:一张背景图片,添加当前浏览人的微信头像和昵称,添加推广二维码,合成为一张图片,长按保存下来。
环境:uni-app开发,打包为h5,在微信中打开
方案一:(交互繁琐,放弃)
    1. 正常布局,添加保存按钮
    1. 点击保存按钮,创建画布,将布局元素依次绘入画布。
    1. 绘制完成后,指定绘图区域提取图片。
    1. 创建弹窗Image,将提取的图片显示在image中,用户长按保存
方案2:
    1. 创建屏外画布,将背景图片绘制入画布中,依次将微信头像、昵称、二维码、活动倒计时等信息绘制入画布中,指定绘图区域提取图片。
    1. 创建image,将提起的图片显示出来
    1. 悬窗提醒:长按保存图片
    1. 用户长按image,即可弹窗微信操作窗,保存图片即可
问题:常用浏览器、微信开发者工具均可正常显示,但真机中image无显示内容
纠错过程:
1. 首先怀疑是否绘制成功:经弹窗显示,图片绘制成功
2. 怀疑画布转换图片时是否成功:经弹窗显示,图片转换成功
3. 怀疑base64图片格式错误:经弹窗显示,格式正确
4. 怀疑base64图片过大:经打印计算和各种尺寸的压缩,排除此条
5. 调整画布尺寸:首先保持与手机屏幕相等,成功显示。

原因: 由于提供的海报图片未限制尺寸,绘图时又选择原图绘入,使得canvas尺寸适应图片大小时尺寸过大,导出图片时发生异常。但根本原因是什么,仍未能准确定位(经查,几乎所有的浏览器都对canvas做了尺寸或面积上的限制,但具体数值未知)。
最终方案:尝试逐渐增大尺寸,结合实际需求,最终决定将画布尺寸设置在7501500,并将海报图片严格限制在7501500的尺寸内。

相关文章

网友评论

      本文标题:公众号开发,base64图片,在微信页面中不显示的问题

      本文链接:https://www.haomeiwen.com/subject/mjlgzltx.html