微信小程序canvas--分享朋友圈

这是第二次用canvas做分享朋友圈的图片了，这次先写个小日记吧

效果图( 1.页面 2. 第一次微信官方授权弹窗 3. 第一次拒绝第二次自定义弹窗打开小程序设置 4. canvas生成的图片)

image.png
image.png
image.png
image.png

wxml

<view class="container">
    <view class="box">
        <image class="bg" src="/images/my/bg.jpg"></image>
        <image class="ewm" src="/images/my/ewm.jpg"></image>
    </view>
    <button bindtap="shareFriends">保存图片分享朋友圈</button>
    <!-- 画布 -->
    <canvas style="width: 286px;height: 415px;background:rgba(0,0,0,.5);position: fixed;top: -10000px;" canvas-id="shareFriends"></canvas>
</view>

<!-- 授权弹窗 -->
<view class='open-seting-bg' wx:if='{{openSet}}' catchtap='cancleSet'>
  <view class='open-set-inner'>
    <view class='set-title'>是否打开授权设置？</view>
    <view class='btn-openset'>
      <view catchtap='cancleSet'>取消</view>
          <view>
              <button open-type='openSetting' class='button-style' catchtap='cancleSet'>确定</button>
          </view>
    </view>
  </view>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    shareImg: ''
  },

  // 保存图片
  shareFriends: function () {
    wx.showLoading({
      title: '图片生成中',
    })
    // canvas绘图
    this.createdCode();
    let that = this;
    //canvas画图需要时间而且还是异步的，所以加了个定时器
    setTimeout(() => {
      // 将生成的canvas图片，转为真实图片
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        canvasId: 'shareFriends',
        success: function (res) {
          console.log('res', res);
          let shareImg = res.tempFilePath;
          that.setData({
            shareImg: shareImg,
            showShareModal: false
          })
          // 保存图片
          that.saveImg();
          // loading停止
          wx.hideLoading()
        },
        fail: function (res) {}
      })
    }, 500)
  },

  //开始绘图
  createdCode() {
    const ctx = wx.createCanvasContext('shareFriends'); 

    // 1. 绘制背景图
    ctx.save()
    ctx.drawImage('/images/my/bg.jpg', 0, 0, 286, 480);
    ctx.save();

   // 2. 绘制小程序logo
    ctx.beginPath();
    ctx.arc(145, 236, 40, 0, 2 * Math.PI);
    ctx.clip();
    // ctx.drawImage(img, x, y, d, d); 
    ctx.drawImage('/images/my/ewm.jpg', 105, 196, 80, 80);
    ctx.draw()
    // 绘制 封面图并裁剪（这里图片确定是按100%宽度，同时高度按比例截取，否则图片将会变形）
  },

  // 长按保存事件
  saveImg() {
    let that = this;
    // 获取用户是否开启用户授权相册
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              wx.saveImageToPhotosAlbum({
                filePath: that.data.shareImg,
                success() {
                  wx.showToast({
                    title: '保存成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            },
            fail() {
              // 如果用户拒绝过或没有授权，则再次打开授权窗口
              //（ps：微信api又改了现在只能通过button才能打开授权设置，以前通过openSet就可打开，下面有打开授权的button弹窗代码）
              that.setData({
                openSet: true
              })
            }
          })
        } else {
          // 有则直接保存
          wx.saveImageToPhotosAlbum({
            filePath: that.data.shareImg,
            success() {
              wx.showToast({
                title: '保存成功'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  },
  // 取消授权
  cancleSet() {
    this.setData({
      openSet: false
    })
  },
})

下次再补充 （携带圆形的微信用户头像、文字以及有echarts圆形半分比的部分代码）
积累在一点一滴中，路还长，我们一起共同进步吖