微信小程序生成图片分享朋友圈

前言

**
目前小程序只支持卡片方式分享到聊天页面,官方不知道何时会新增分享朋友圈方式。最近有个需求要分享到朋友圈,现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。最近有个此类需求,至此把开发过程中遇到的坑做个记录,下面先看下效果图。

踩坑记录:

1.在开发过程中,使用了微信的下载文件API,所以需要在小程序后台downloadFile合法域名配置 <<图片域名>> 的白名单(配置后有时间延迟,所以需要耐心等待)。但是,不管是在微信开发工具中还是真机开启调试模式时候,不配置下载域名白名单功能也是正常。所以记得配置。

2.下载图片后,一定要通过wx.getImageInfo 来获取到图片的信息。不然真机上无法获取到图片信息,Canvas 无法绘制。

目前通过Canvas绘制出来的文字和图片还有些模糊,有抗锯齿。接下来将会优化,然后再进行补充说明。

在这里插入图片描述
在这里插入图片描述

1.打卡成功后后台返回数据,下载要绘制的图片


OnShow()方法里调用该方法

 // 弹出打卡海报
  showPoster: function() {
    var that = this;
    that.setData({
      showPosterImage: false
    })

    // 下载海报图
    wx.downloadFile({
      url: that.data.posterBackground,
      success: function(res) {
        that.setData({
          downloadPosterBg: res.tempFilePath
        })
      },
      fail: function() {
        console.log('fail')
      }
    })

    // 下载头像
    wx.downloadFile({
      url: that.data.posterHeadImage,
      success: function(res) {
        that.setData({
          downloadHeaderImage: res.tempFilePath
        })
      },
      fail: function() {
        console.log('fail')
      }
    })
	//下载二维码
    wx.downloadFile({
      url: that.data.posterQRImage,
      success: function(res) {
        that.setData({
          downloadQRImage: res.tempFilePath
        })
      },
      fail: function() {
        console.log('fail')
      }
    })
  },```

**2.点保存图片,Canvas绘制图片**

`````'
// 保存海报
  savePoster: function() {
  
    // 获取背景图片信息
    var that = this;
    let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: that.data.downloadPosterBg,
        success: function(res) {
          resolve(res);
        }
      })
    });
    //获取头像信息
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: that.data.downloadHeaderImage,
        success: function(res) {
          resolve(res);
        }
      })
    });
    //获取二维码
    let promise3 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: that.data.downloadQRImage,
        success: function(res) {
          resolve(res);
        }
      })
    });

    Promise.all([
      promise1, promise2, promise3
    ]).then(res => {

      wx.showLoading({
        title: '分享图片生成中...',
        icon: 'loading',
        duration: 1000
      })

      /* 图片获取成功才执行后续代码 */
      var canvas = wx.createCanvasContext('hoCanvas')
      // 绘制背景图
      // canvas.drawImage(res[0].path, 0, 0, 628, 838);
      canvas.drawImage(res[0].path, 0, 0, 632, 970);
      // 绘制头像
      canvas.save()
      canvas.beginPath()
      // canvas.arc(50, 740, 30, 0, 2 * Math.PI)
      canvas.arc(68, 708, 30, 0, 2 * Math.PI)
      canvas.clip()
      // canvas.drawImage(res[1].path, 20, 710, 60, 60);
      canvas.drawImage(res[1].path, 38, 678, 60, 60);
      canvas.restore()

      // 绘制活动二维码
      // canvas.drawImage(res[2].path, 490, 700, 100, 100);
      canvas.drawImage(res[2].path, 492, 820, 100, 100);

      //绘制微信昵称文本
      canvas.setFontSize(23)
      canvas.setFillStyle("#424E75")
      canvas.setStrokeStyle('#424E75')
      // canvas.fillText(this.data.posterNickName, 100, 745, 350)
      canvas.fillText(this.data.posterNickName, 110, 700, 350)

      // 绘制打卡昵称
      canvas.setFontSize(18)
      canvas.setFillStyle("#424E75")
      canvas.setStrokeStyle('#424E75')
      canvas.fillText(this.data.posterDakaName, 110, 740)

      // 绘制坚持天数
      canvas.setFontSize(50)
      canvas.setFillStyle("#424E75")
      canvas.setStrokeStyle('#424E75')
      if (this.data.posterDakaCount <= 9) {
        canvas.fillText(this.data.posterDakaCount, 520, 750)
      } else if (this.data.posterDakaCount > 9 && this.data.posterDakaCount < 99) {
        canvas.fillText(this.data.posterDakaCount, 510, 750)
      } else if (this.data.posterDakaCount > 99 && this.data.posterDakaCount < 999) {
        canvas.fillText(this.data.posterDakaCount, 500, 750)
      }

      canvas.draw()

      setTimeout(function() {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 632,
          height: 970,
          destWidth: 632,
          destHeight: 970,
          canvasId: 'hoCanvas',
          success: function(res) {
            that.setData({
              postUrl: res.tempFilePath,
            })
            that.saveImageToAlbum();
            wx.hideLoading()
          },
          fail: function(res) {}
        })
      }, 500)
    })
  },

3.调用微信API,保存图片


  saveImageToAlbum: function() {
    var that = this;
    //将图片保存到相册       
    wx.saveImageToPhotosAlbum({
      filePath: that.data.postUrl,
      success(res) {
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册了,快去分享朋友圈吧',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#818FFB',
          success: function(res) {
            if (res.confirm) {
              that.setData({
                showPosterImage: true
              })
            }
            that.hideShareImg()
          }
        })
      }
    })
  },


  • 14
    点赞
  • 114
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
企业微信分享图片到微信好友需要通过调用微信 JS-SDK 中的分享接口来实现。具体的步骤如下: 1. 首先需要在企业微信后台中创建一个应用,并获取到应用的 `CorpID` 和 `AgentID`。 2. 在企业微信后台的应用详情页面中开启“JS-SDK权限验证”,并填写可信域名。 3. 在网页中引入微信 JS-SDK 的相关代码,例如: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> wx.config({ beta: true, // 必须这么写,否则会有问题 appId: '企业微信应用的CorpID', timestamp: '生成签名的时间戳', nonceStr: '生成签名的随机串', signature: '签名', jsApiList: ['chooseImage', 'uploadImage', 'sendImage'] // 需要使用的接口列表 }); wx.ready(function() { // 在这里调用需要使用的 API }); </script> ``` 4. 在 `wx.ready` 方法中调用 `chooseImage` 方法,选择需要分享图片,并调用 `uploadImage` 方法上传图片: ```javascript wx.ready(function() { wx.chooseImage({ count: 1, success: function(res) { var localIds = res.localIds; // 选定照片的本地 ID,可以通过 wx.uploadImage 接口上传到微信服务器 wx.uploadImage({ localId: localIds[0], isShowProgressTips: 1, success: function(res) { var serverId = res.serverId; // 返回图片的服务器端 ID,可以通过 wx.sendImage 接口发送给微信好友 wx.sendImage({ serverId: serverId, type: 'image', success: function() { // 分享成功后的回调函数 } }); } }); } }); }); ``` 5. 调用 `sendImage` 方法,将已上传到微信服务器的图片发送给微信好友: ```javascript wx.sendImage({ serverId: serverId, // 通过 wx.uploadImage 上传到微信服务器的图片 ID type: 'image', success: function() { // 分享成功后的回调函数 } }); ``` 需要注意的是,分享图片到微信好友需要用户手动选择图片并确认,因此不能直接在页面加载时进行分享。另外,为了保护用户隐私,微信限制了网页端直接获取用户的好友列表,因此无法实现直接分享到指定好友的功能。
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值