Pit filling: pit stepped by wechat applet with Canvas poster

Over the weekend, I made a function to put a Christmas hat on the avatar in a small program. I first called the user’s avatar and then drew a new avatar with canvas. There were two problems in drawing the new avatar.

Developer tool error:wx.qlogo.cnNot in the following list of legal downloadFile domain names……

There is no error when calling a local image or taking a photo, but there is an error when calling a user’s avatar because the user’s avatar is a network image. To solve this problem, add a legitimate domain name to the applet background:

2. The user’s profile picture cannot be seen on the canvas picture on the real phone

Fixed the first problem, the developer tool can correctly generate a new avatar, later open the real machine only to find it is blank. Cause: The canvas of the applet draws a picture. The picture path must be a local path, not a network path. Solution: After obtaining the profile picture, use the downloadFile method to download the network picture to the local, and then start drawing canvas.

wx.downloadFile({
    url: this.avatarUrl,
    success: function(res) { that.setData({ avatarUrl:res.tempFilePath, }) that.draw(); // draw}, fail:function (err) {
        console.log(err)
    }
Copy the code