收藏
回答

关于canvas绘制图像,生成卡片的问题?

我想用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))
  },



回答关注问题邀请回答
收藏

2 个回答

  • 郑旭东
    郑旭东
    2020-05-03

    猜测是不是时序有问题,用户选择头像后,用了setData,这个是异步的,如果这时候你直接用canvas,可能头像地址还不能取到。

    2020-05-03
    有用
    回复
  • Mr.Zhao
    Mr.Zhao
    2020-05-02

    头像地址从哪来的

    2020-05-02
    有用
    回复 2
    • 小泽
      小泽
      2020-05-02
      边框是固定的,中间的图片有两个途径,1是获取用户的头像;2是用户从相册内选择。

      代码如下:
      2020-05-02
      回复
    • Mr.Zhao
      Mr.Zhao
      2020-05-02回复小泽
      https://developers.weixin.qq.com/s/7K6Xz3mc7rhx  你看看我写的这个,画布用的不多,不熟悉
      2020-05-02
      回复
登录 后发表内容
问题标签