用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

填坑:微信小程序用canvas海报踩到的坑

Rolan 2019-12-11 00:02

canvas图片在真机上看不到用户头像

周末在小程序上做了个给头像戴圣诞帽的功能,先调用用户头像,再用canvas绘制新头像,在绘制新头像时遇到两个问题。

一、开发者工具报错: https://wx.qlogo.cn 不在以下 downloadFile 合法域名列表中……

调用本地图片和拍照都没有报错,然而调用用户头像就报错了,这是因为用户头像是网络图片。

要解决这个问题,在小程序后台加合法域名就可以:

二、canvas图片在真机上看不到用户头像

解决了第一个问题,在开发者工具可以正确生成新头像,后来真机打开才发现是空白的。

原因:小程序的canvas绘制图片,图片路径必须为本地的路径,不能是网络路径。

解决方案:获取到头像后,用downloadFile方法把网络图片下载到本地,下载之后再开始绘制canvas。

wx.downloadFile({
    url: this.avatarUrl,
    success: function (res) {
        that.setData({
            avatarUrl:res.tempFilePath,
        })
        that.draw(); // 绘制
    },
    fail: function (err) {
        console.log(err)
    }
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 一个互联网学徒 来自: segmentfault
  • w温雅.40 2019-12-12 12:25
    我也做好一个圣诞帽的,欢迎讨论

推荐阅读

    便民服务

    400-8826-226

    电话服务热线时间:9:00 - 21:00

    关注我们

    微信公众号