微信小程序分享功能，保存图片分享朋友圈功能，canvas基础

骑猪看日落 2021-07-24 16:35 583阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

具体步骤都注释到代码里面了 如有疑问请加q群：581478349   进行咨询

<view class="show_bg" wx:if="{
       {share_show=='show'}}">
      <view class='share'>
        <canvas canvas-id="shareCanvas" style="width:300px;height:330px"></canvas>
        <button class='bottom' bindtap="bc">
          
          保存到相册    </button>
        <button class='bottom_' open-type="share">
    
          分享给好友  </button>
      </view>
    </view>

// pages/fx/index.js
    Page({
    
      data: {
        share_show:'show',
        shareTitle: '承接小程序开发，h5网页， pc网站开发，可前后一整套', // 分享标题
    
        shareCoverImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3087825134,1450794308&fm=26&gp=0.jpg', // 分享封面图
    
        shareQrImg: 'https://img-blog.csdnimg.cn/20190128235000411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70', // 分享小程序二维码
      },
    
      /**
    
         * 生命周期函数--监听页面加载
    
         */
      onShow(){
        this.fx()
      },
    
      fx: function() {
        let that = this;
        var UserName = wx.getStorageSync('userArr').name;
        wx.setNavigationBarTitle({
          title: '分享到朋友圈',
        })
        var time = '12:24'
        var UserImage = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=378155249,1668018921&fm=26&gp=0.jpg';
        var timestamp = Date.parse(new Date());
        var date = new Date(timestamp);
        //获取年份  
        var Y = date.getFullYear();
        //获取月份  
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        //获取当日日期 
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var time1 = Y + "-" + M + "-" + D
        that.setData({
          seeDate: time1
        })
        // 创建画布
        const ctx = wx.createCanvasContext('shareCanvas')
        // 白色背景
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, 300, 380)
        ctx.draw()
        // 下载视频封面图
        wx.getImageInfo({
          src: that.data.shareCoverImg,
          success: (res2) => {
            ctx.drawImage(res2.path, 0, 0, 300, 168)
            // 分享标题
            // ctx.setTextAlign('center')    // 文字居中
            ctx.setFillStyle('#000')  // 文字颜色：黑色
            ctx.setFontSize(20)         // 文字字号：20px
            if (that.data.shareTitle.length <= 14) {
              // 不用换行
              ctx.fillText(that.data.shareTitle, 10, 200, 280)
            } else if (that.data.shareTitle.length <= 28) {
              // 两行
              let firstLine = that.data.shareTitle.substring(0, 14);
              let secondLine = that.data.shareTitle.substring(14, 27);
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            } else {
              // 超过两行
              let firstLine = that.data.shareTitle.substring(0, 14);
              let secondLine = that.data.shareTitle.substring(14, 27) + '...';
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            }
            // 下载二维码
            wx.getImageInfo({
              src: that.data.shareQrImg,
              success: (res3) => {
                let qrImgSize = 70
                ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)
                ctx.stroke()
                ctx.draw(true)
                // 用户昵称
                ctx.setFillStyle('#000')  // 文字颜色：黑色
                ctx.setFontSize(14) // 文字字号：16px
                ctx.fillText(wx.getStorageSync('userArr').name, 38, 284)
                // 观看日期
                ctx.setFillStyle('#999')  // 文字颜色：黑色
                ctx.setFontSize(10)       // 文字字号：16px
                ctx.fillText('有需求者请v扫二维码', 38, 298)
                // 下载用户头像
                wx.getImageInfo({
                  src: wx.getStorageSync('userArr').logo,
                  success: (res4) => {
                    // 先画圆形，制作圆形头像(圆心x，圆心y，半径r)
                    ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
                    ctx.clip()
                    // 绘制头像图片
                    let headImgSize = 24
                    ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
                    // ctx.stroke() // 圆形边框
                    ctx.draw(true)
                  }
                })
              }
            })
          }
        })
      },
      bc() {
        // 保存到相册
        wx.canvasToTempFilePath({
          canvasId: 'shareCanvas',
          success: function(res) {
            console.log(res)
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function(res) {
                console.log(1111, res)
                wx.showToast({
                  title: '分享图片已保存到相册,请到朋友圈选择图片发布'
                })
              }
            })
          }
        }, this)
      },
      // 分享
      onShareAppMessage: function () {
        let url ='参数根据个人情况所定'
        return {
          title: "吖吖分享",
          path:'/pages/home/index？url='+JSON.stringify(url)
        }
    
      }
    
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/2327d0872c0d4f5e89a98068569fbad9.png