当前位置：首页 > uni-app

uniapp 分享图

2026-02-06 06:26:42uni-app

生成分享图的方法

在UniApp中生成分享图通常涉及使用Canvas绘制图片，结合用户数据和静态资源，最终导出为图片供分享使用。以下是具体实现方式：

安装Canvas相关依赖 确保项目中已安装html2canvas或类似库，用于将HTML内容转换为Canvas。通过npm安装：

npm install html2canvas --save

创建Canvas画布 在页面中创建Canvas元素，设置宽高以适应不同设备屏幕：

<canvas canvas-id="shareCanvas" style="width: 300px; height: 500px;"></canvas>

绘制分享图内容 使用UniApp的Canvas API绘制文本、图片和二维码等元素。以下是一个示例代码片段：

const ctx = uni.createCanvasContext('shareCanvas');
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 300, 500);
ctx.setFontSize(16);
ctx.setFillStyle('#000000');
ctx.fillText('分享标题', 20, 30);
ctx.drawImage('/static/logo.png', 20, 50, 100, 100);
ctx.draw();

导出图片并分享 绘制完成后，将Canvas内容转换为临时图片路径，调用分享接口：

uni.canvasToTempFilePath({
  canvasId: 'shareCanvas',
  success: (res) => {
    uni.share({
      provider: 'weixin',
      scene: 'WXSceneSession',
      type: 'image',
      imageUrl: res.tempFilePath,
      success: () => console.log('分享成功')
    });
  }
});

优化分享图性能

预加载资源 提前加载图片资源，避免绘制时延迟：

uni.getImageInfo({
  src: '/static/logo.png',
  success: (res) => console.log('图片加载完成', res.path)
});

使用缓存机制 对于动态生成的分享图，可缓存结果以减少重复渲染：

const cacheKey = 'share_' + Date.now();
uni.setStorageSync(cacheKey, tempFilePath);

处理不同平台差异

微信小程序适配 微信小程序需额外处理Canvas层级问题，通过type='2d'启用新版Canvas：

const query = uni.createSelectorQuery().in(this);
query.select('#shareCanvas').node().exec((res) => {
  const canvas = res[0].node;
  const ctx = canvas.getContext('2d');
});

H5平台兼容 H5端可能需要使用html2canvas库直接转换DOM节点：

html2canvas(document.getElementById('shareBox')).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
});

常见问题解决

图片模糊处理 设置Canvas的像素比为设备实际DPI，提高清晰度：

const dpr = uni.getSystemInfoSync().pixelRatio;
ctx.scale(dpr, dpr);

文字换行实现 手动计算文字宽度并插入换行符：

uniapp 分享图

const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
  const words = text.split(' ');
  let line = '';
  for (let word of words) {
    const testLine = line + word + ' ';
    const metrics = ctx.measureText(testLine);
    if (metrics.width > maxWidth) {
      ctx.fillText(line, x, y);
      line = word + ' ';
      y += lineHeight;
    } else line = testLine;
  }
  ctx.fillText(line, x, y);
};

通过以上方法，可以在UniApp中高效生成适用于多平台的分享图片，并解决常见的显示和性能问题。

标签: uniapp