小程序Canvas生成图片分享二维码

港控/mmm° 2022-02-26 14:16 344阅读 0赞

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var context = wx.createCanvasContext('only')
        context.setFillStyle('#ffffff')
        context.drawImage('../img/img3.jpg', 10, 5, 65, 65)
        context.setFontSize(18)
        context.fillStyle = '#000';
        context.fillText('我是标题~~~', 80, 45)
        context.drawImage('../img/img3.jpg', 10, 80, 300, 300)
        context.drawImage('../img/img3.jpg', 10, 385, 100, 100)
        context.fillText('123123', 120, 425)
        context.fillStyle = 'red';
        context.fillText(6666, 120, 470)
        context.fillStyle = '#555';
        context.setFontSize(18)
        context.fillText('长按保存二维码', 100, 520)
        context.setFontSize(20)
        context.draw()
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      },
      // 长按保存二维码
      longtap(e) {
        wx.canvasToTempFilePath({
          canvasId: 'only',
          quality: 1,
          success(res) {
            wx.previewImage({
              urls: [res.tempFilePath]
            })
          }
        })
      },
    })

小程序目前没有直接分享到朋友圈功能、所以曲线救国的办法就是用canvas生成图片、保存到手机上在朋友圈发布。

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220226/64afb0e0fb464bd9a72e99d6a58a5970.png