「喜迎华诞」手把手教你用微信小程序给头像带上小旗帜

一、文章前言

  2022年是新中国成立73周年，在这个举国欢庆的日子里，让我们给头像上加上小红旗，迎国庆换新颜，一起为祖国母亲庆生吧！

二、实现原理

使用canvas配合image来实现，将canvas隐藏在所展示的image图片后面，点击保存时将canvas画布上的内容进行绘制并保存图片至手机相册。

三、开发步骤

2.1、创建微信公众平台账号并安装微信Web开发者工具。
2.2、打开开发工具，新建一个项目，因为实现起来不需要服务器也不需要云函数，所以我们这里选择不使用云服务。

2.3、在pages文件夹下面创建一个文件夹并新建对应的page文件。

2.4、在wxml文件绘制两个image以及两个view标签，给两个view增加触摸或者点击事件。

 	<image class="bg" src="{{bgSrc}}" />
    <image class="img" src="{{imgSrc}}" />
    <view catchtap="choose" class="btn1">选择底片图</view>
    <view catchtap="choose1" class="btn1">选择覆盖图</view>

2.5、在js文件中实现对应的绑定事件，将选择的图片在界面上进行展示。

    let that= this;
    wx.chooseImage({
      success: function (res) {
        that.bgSrc = res.tempFilePaths[0];
        that.setData({
          bgSrc: res.tempFilePaths[0]
        })
      }
    });

2.6、回到wxml文件中，绘制canvas标签。这里要注意的是需要将image标签置于canvas标签上面，通过css样式中的z-index和position属性值来实现，如果将canvas画布置于顶层的话，那我们就无法直观的预览上传图片之后的效果，用户也能够直接在这个画布上操作涂画，这对我们最终导出的海报图片影响是很大的。

 <canvas class="myCanvas" canvas-id="myCanvas" style="width: 375px; height: 375px;"></canvas>

2.7、在wxml文件中绘制view标签，增加触摸或点击事件，给用户提供保存海报的入口。

	<view catchtap="saveImg" class="btn2">保存海报</view>

2.8、js文件在保存海报的响应事件中，我们需要提前向用户发起请求，以此来询问用户是否同意授权小程序能否将图片保存至手机的权限，如果用户之前已经同意授权，则不会出现授权弹窗，会直接进入成功的回调。

    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.saveImageFunction();
            }
          });
        } else {
          that.saveImageFunction();
        }
      }
    });

2.9、实现saveImageFunction()函数，该函数的作用是将canvas画布上面的内容进行导出。在处理的时候可以增加一些加载中的动画，增强用户体验。

	wx.showLoading({
      title: '保存中...'
    });

    let that= this;
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(self.bgSrc, 0, 0, 375, 375);
    ctx.drawImage(self.imgSrc, 1, -20, 175, 175);
    ctx.draw(false, function (e) {
      // 保存到本地
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 375,
        height: 417,
        canvasId: 'myCanvas',
        success: function (res) {
          let pic = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: pic,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            }, fail: function (res) {
              wx.hideLoading();
            }
          });
        },
        fail: function (res) {
          wx.hideLoading();
        }
      });
    });

四、完整代码

<!--index.wxml-->
<view class="content">
  <view class="show_block">
    <image class="bg" src="{{bgSrc}}" />
    <image class="img" src="{{imgSrc}}" />
    <canvas class="myCanvas" canvas-id="myCanvas" style="width: 375px; height: 375px;"></canvas>
  </view>
  <view style="display: flex;">
    <view catchtap="choose" class="btn1">选择底片图</view>
    <view catchtap="choose1" class="btn1">选择覆盖图</view>
    <view catchtap="save" class="btn2">保存海报</view>
  </view>
</view>

.content .show_block {
  position: relative;
  width: 750rpx;
  height: 750rpx;
}

.content .bg {
  display: block;
  width: 100%;
  height: 100%;
}

.content .img {
  position: absolute;
  top: -20rpx;
  left: 1rpx;
  display: block;
  width: 350rpx;
  height: 350rpx;
}

.content .myCanvas {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.btn1 {
  margin-top: 24rpx;
  margin-left: 50rpx;
  text-align: center;
  line-height: 62rpx;
  font-size: 28rpx;
  width: 181rpx;
  height: 62rpx;
  background: #4FAFF2;
  border-radius: 10rpx;
  color: white;
}
.btn2 {
  margin-top: 24rpx;
  margin-left: 50rpx;
  text-align: center;
  line-height: 62rpx;
  font-size: 28rpx;
  width: 181rpx;
  height: 62rpx;
  background: #AD302C;
  border-radius: 10rpx;
  color: white;
}

choose: function () {
    let self = this;
    wx.chooseImage({
      success: function (res) {
        self.bgSrc = res.tempFilePaths[0];
        self.setData({
          bgSrc: res.tempFilePaths[0]
        })
      }
    });
  },
    save: function () {
    let self = this;
    if (!this.imgSrc) {
      wx.showToast({
        title: '请先选择图片',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              self.saveImage();
            }
          });
        } else {
          self.saveImage();
        }
      }
    });
  },
  saveImage() {
    wx.showLoading({
      title: '保存中...'
    });

    let self = this;
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(self.bgSrc, 0, 0, 375, 375);
    ctx.drawImage(self.imgSrc, 1, -20, 175, 175);
    ctx.draw(false, function (e) {
      // 保存到本地
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 375,
        height: 417,
        canvasId: 'myCanvas',
        success: function (res) {
          let pic = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: pic,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            }, fail: function (res) {
              wx.hideLoading();
            }
          });
        },
        fail: function (res) {
          wx.hideLoading();
        }
      });
    });
  }

五、国庆临近，祝祖国永远繁荣昌盛！