微信小程序前端生成图片用于分享朋友圈最终解决方案

在微信小程序中生成图片用于分享朋友圈是一个常见的需求。为了实现这一功能，我们可以使用小程序提供的 API 和一些前端技巧。以下是一个详细的最终解决方案，包括生成图片、保存图片到本地以及分享到朋友圈。

我们首先需要生成一张图片。可以使用 canvas 来绘制图片。

  
  生成图片
  

/* share-image.wxss */
.share-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

canvas {
  border: 1px solid #ccc;
}

image {
  margin-top: 20px;
  width: 100%;
}

// share-image.js
Page({
  data: {
    imageUrl: ''
  },

  generateImage: function() {
    const ctx = wx.createCanvasContext('shareCanvas');

    // 绘制背景
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 375, 607);

    // 绘制文本
    ctx.setFontSize(24);
    ctx.setFillStyle('#000000');
    ctx.setTextAlign('center');
    ctx.fillText('分享文本', 187.5, 50);

    // 绘制图片
    const imageSrc = 'https://example.com/image.png';
    ctx.drawImage(imageSrc, 50, 100, 275, 275);

    // 绘制二维码
    const qrCodeSrc = 'https://example.com/qrcode.png';
    ctx.drawImage(qrCodeSrc, 150, 400, 75, 75);

    // 绘制完成
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: (res) => {
          this.setData({
            imageUrl: res.tempFilePath
          });
        },
        fail: (err) => {
          console.error('生成图片失败', err);
        }
      });
    });
  },

  saveImage: function() {
    const { imageUrl } = this.data;

    if (!imageUrl) {
      wx.showToast({
        title: '图片不存在',
        icon: 'none'
      });
      return;
    }

    wx.saveImageToPhotosAlbum({
      filePath: imageUrl,
      success: () => {
        wx.showToast({
          title: '图片已保存',
          icon: 'success'
        });
      },
      fail: (err) => {
        console.error('保存图片失败', err);
      }
    });
  }
});

在生成图片并保存到本地后，用户可以点击按钮将图片分享到朋友圈。

  
  生成图片
  
  分享到朋友圈

// share-image.js
Page({
  data: {
    imageUrl: ''
  },

  generateImage: function() {
    const ctx = wx.createCanvasContext('shareCanvas');

    // 绘制背景
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 375, 607);

    // 绘制文本
    ctx.setFontSize(24);
    ctx.setFillStyle('#000000');
    ctx.setTextAlign('center');
    ctx.fillText('分享文本', 187.5, 50);

    // 绘制图片
    const imageSrc = 'https://example.com/image.png';
    ctx.drawImage(imageSrc, 50, 100, 275, 275);

    // 绘制二维码
    const qrCodeSrc = 'https://example.com/qrcode.png';
    ctx.drawImage(qrCodeSrc, 150, 400, 75, 75);

    // 绘制完成
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: (res) => {
          this.setData({
            imageUrl: res.tempFilePath
          });
        },
        fail: (err) => {
          console.error('生成图片失败', err);
        }
      });
    });
  },

  saveImage: function() {
    const { imageUrl } = this.data;

    if (!imageUrl) {
      wx.showToast({
        title: '图片不存在',
        icon: 'none'
      });
      return;
    }

    wx.saveImageToPhotosAlbum({
      filePath: imageUrl,
      success: () => {
        wx.showToast({
          title: '图片已保存',
          icon: 'success'
        });
      },
      fail: (err) => {
        console.error('保存图片失败', err);
      }
    });
  },

  shareToTimeline: function() {
    const { imageUrl } = this.data;

    if (!imageUrl) {
      wx.showToast({
        title: '图片不存在',
        icon: 'none'
      });
      return;
    }

    wx.chooseMessageFile({
      count: 1,
      type: 'image',
      success: (res) => {
        wx.showActionSheet({
          itemList: ['分享到朋友圈'],
          success: () => {
            wx.shareToTimeline({
              title: '分享标题',
              query: 'query=your_query',
              imageUrl: res.tempFiles[0].path,
              success: () => {
                wx.showToast({
                  title: '分享成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('分享失败', err);
              }
            });
          },
          fail: (err) => {
            console.error('选择失败', err);
          }
        });
      },
      fail: (err) => {
        console.error('选择文件失败', err);
      }
    });
  }
});

确保在 app.json 中添加必要的权限：

{
  "permissions": {
    "scope.writePhotosAlbum": {
      "desc": "您的授权将允许我们保存生成的图片到您的相册"
    }
  }
}