微信小程序--元旦头像框项目修改

上周对元旦头像框进行修改，主要是跟后端对接，实现头饰功能
首先判断用户上传的是不是带有人脸的头像，这一步将跳转后端进行相应的判断，前端只需根据后端返回的数据做好提示工作。
之后用户进行头饰的选择，点击对应头饰会将头饰信息以及当前的背景头像传给后端进行操作，在背景头像上p上头饰后，返回格式为base64的图片，前端根据该数据进行图片的展示。也可不选择头饰，图片格式就不是base64，在图片上的显示上代码有所不同，所以需要进行图片格式的判断。
最后就是在新页面图片的显示，以及图片的保存功能。

将后端域名加入小程序合法域名

为了能够调用自己后端的url，需要对域名进行配置，登录微信公众平台，选择开发管理下的开发设置，在对应的域名下填入需要的域名
需要注意的是，如果在程序中使用到了wx.getImageInfo的话，也需要配置一个域名https://thirdwx.qlogo.cn，因为该函数的原理是将对应的图片下载下来保存为一个临时路径，所以需要配置download域名

人脸识别相关功能

选择好背景图片以及头像之后，点击下一步会在canvas上进行绘制，绘制成功后应该跳转后端进行图片是否有人脸的判断，根据后端传送回来的数据进行提示或者到下一个界面进行头饰的添加。
获取返回的数据，若为0，则提示用户需要上传带有人脸的图片，若为1，则携带当前的图片跳转至下一个界面

          wx.uploadFile({    //上传图片到django框架
            filePath:tempFilePath,
            name: 'image',
           url: '自己的url',
            method:'POST',          //路由操纵类型
            header:{                //头文件
              'content-type':'application/x-www-form-urlencoded'    //发送过去的编码属性
            },
            formData:{    //附加属性opid
              openid:self.data.openid,
              
            },
            success: res => { // 上传django成功时的回调函数
              console.log('[上传文件] 成功：', res)
              wx.hideLoading() // 隐藏加载提示框
              console.log(res.data)  //打印返回的值
            if(res.data=='1'){
              wx.navigateTo({
                url:  `../decorate/decorate?index=${tempFilePath}`
              })
            }else{
              
              wx.showToast({

                title: '请上传带有人像的图片！',
        
                icon: 'none',
        
                duration: 1500,
        
                success: function () {
                }
        
               })
            }
            },
            fail: e => { // 调用失败时的回调函数
              console.error('[上传文件] 失败：', e);
              wx.showToast({ // 显示消息提示框
                icon: 'none',
                title: '上传失败',
              })
            },
            complete: () => { // 调用完成时的回调函数
            
            }
          })

头饰添加

在每次点击头饰图片后，对应函数将当前图片以及头饰参数传递给后端，后端进行相应操作后，会返回base64格式的图片，前端获取后，展示出来。

<view class="img_head">
<image src="{{index}}"></image>
</view>

将后端传回的data赋值给image组件的src所需的参数上

  wx.uploadFile({    //上传图片到django框架
        filePath:app.globalData.bgPic,
        name: 'image',
       url: '自己的url',
        method:'POST',          //路由操纵类型
        header:{                //头文件
          'content-type':'application/x-www-form-urlencoded'    //发送过去的编码属性
        },
        formData:{    //附加属性opid
          openid:this.data.openid,
          hat:this.data.currentHatId
        },
        success: res => { // 上传django成功时的回调函数
          console.log('[上传文件] 成功：', res)
          wx.showToast({
            title: '上传成功',
            icon:'success'
          })  
          //console.log(res.data)  //打印返回的值
        
          let src = `data:image/png;base64,${res.data}`;
         // console.log(src)
          this.setData({
            index: src
          })
        },
        fail: e => { // 调用失败时的回调函数
          console.error('[上传文件] 失败：', e);
          wx.showToast({ // 显示消息提示框
            icon: 'none',
            title: '上传失败',
          })
        },
        complete: () => { // 调用完成时的回调函数
          wx.hideLoading() // 隐藏加载提示框
        }
      })

展示界面的图片显示

最开始使用canvas绘制base64格式的图片，就需要先将图片保存在文件管理器中用户下的文件夹中，通过自定义的名字在进行调用。在电脑上调试正常，但是在手机上会出现第二次生成头像，canvas也还是绘制第一张图片的错误，经过修改未能解决，所以使用了另一种更简单的方法，直接用image组件进行显示，对图片进行保存而不是通过canvas保存

  <view class="img_head">
    <image  src="{{fximgurl}}" style="height:510rpx;;width:510rpx;"></image>
  </view>

获取传递过来的数据，赋值给image组件所需要的参数上

    onLoad: function (options) {
      var that = this
      var qrcode =app.globalData.bgPic;    
        that.setData({
          check: options.check ,
          fximgurl:app.globalData.bgPic  
        })
    },

图片保存

base64格式图片的保存方法和临时路径图片保存方法不同，需要分别判断后保存
base64图片：使用文件管理器图片写入，后调用保存到相册的函数进行保存
临时路径图片：直接调用保存到相册的函数进行保存

savePic() {
      removeSave()
      let that = this
      //若二维码未加载完毕，加个动画提高用户体验
      wx.showToast({
        icon: 'loading',
        title: '正在保存图片',
        duration: 1000
      })
      // base64图片编码的图片保存
   if(that.data.if=='0'){
    var save = wx.getFileSystemManager();
    var number = Math.random();
    save.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
      data: that.data.fximgurl,
      encoding: 'base64',
      success: res => {
        console.log(669699, res)
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
          success: function (res) {
            wx.showToast({
              title: '保存成功',
              icon: "success",
              duration: 1000
            })
          },
          fail: function (err) {
            wx.showToast({
              title: '保存失败',
              icon: "success",
              duration: 1000
            })
            console.log(err)
          }
        })
        console.log(res)
      },
      fail: err => {
        console.log(err)
      }
    })
   }else{
    wx.getImageInfo({
      src: that.data.fximgurl,
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.path,
          success(res) {
            wx.showToast({
              title: '保存成功',
              icon: "success",
              duration: 1000
            })
          }
        })
      }
    })
   } 
    }