我想用canvas对用户头像进行绘制，在用户头像上增加一个边框，然后生成图片保存到相册。

我在电脑端利用开发者工具已经实现了功能，但在手机预览的时候无法只能绘制出边框却无法绘制头像，请问有没有解决办法。

核心代码如下：

#wxml

<!-- 头像生成控制台 -->
<view class="user_out">
  <image class="user_bg" src="{{bgsrc}}"></image>
  <image class="user_icon" src="{{src}}"></image>
  <!-- <view class="userAvatar"><open-data type="userAvatarUrl"></open-data></view> -->
</view>

<!-- 绘制图像画板部分 -->
<view style='position:absolute;left:400rpx;'>
  <canvas canvas-id='myCanvas' style='height:600px;width:600px;position:absolute;left:400rpx;'></canvas>
</view>

#js

  //生成头像，即先画图像再画图像框
  generate() {
    var self = this;
    var contex = wx.createCanvasContext('myCanvas'); //ttcanvas为该canvas的ID
    //var contex = ctx.getContext('2d');
    var avatarurl_width = 600; //这个是画布宽
    var avatarurl_heigth = 600; //这个是高
    // var avatarurl_x = 50;
    // var avatarurl_y = 50;
    // contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);//这个地方我画了个头像的圆
    // contex.clip();
    contex.drawImage(self.data.src, 86, 86, 428, 428);
    // contex.drawImage(this.data.src, 105, 105, 630, 630);
    contex.restore();
    contex.save();
    contex.beginPath(); //开始绘制
    // contex.arc(150, 50, 30, 0, Math.PI * 2, false);
    // contex.clip();
    //contex.arc(25, 25, 25, Math.PI * 2, false);
    //contex.clip();
    contex.drawImage(self.data.bgsrc, 0, 0, avatarurl_width, avatarurl_heigth); // 这个是我的背
    contex.restore();
    // contex.setFontSize(20)
    // contex.fillStyle = "#fff";
    // contex.fillText(self.data.gameConfig.myScore, 130, 132)
    // contex.restore();
    contex.draw(true, setTimeout(function () {
      wx.canvasToTempFilePath({ //导出图片
        width: 600,
        height: 600,
        destWidth: 600,
        destHeight: 600,
        canvasId: 'myCanvas',
        success: res => {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (data) {
              // console.log(data);
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              })
            },
            fail: function (err) {
              // console.log(err);
              if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                // console.log("用户一开始拒绝了，我想再次发起授权")
                // console.log('打开设置窗口')
                wx.openSetting({
                  success(settingdata) {
                    console.log(settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      // console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                      wx.showToast({
                        title: '请再次保存',
                        icon: 'success',
                        duration: 2000
                      })
                    } else {
                      // console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                      wx.showToast({
                        title: '获取权限失败，可能导致保存图片无法正常使用',
                        icon: 'none',
                        duration: 2000
                      })
                    }
                  }
                })
              }
            }
          })
        }
      }, this)
    }, 100))
  },