uniapp 分享图

实现 uniapp 分享图功能

使用 canvas 绘制分享图

在 uniapp 中，可以通过 canvas 绘制分享图，并保存为图片。以下是一个基本实现步骤：

1. 创建 canvas 元素
   在页面的模板中定义一个 canvas 元素，并设置其宽高和 ID：

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

2. 绘制内容
   使用 uni.canvasToTempFilePath 将 canvas 内容转为图片路径，并调用 uni.saveImageToPhotosAlbum 保存到相册或直接分享：

   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', 50, 50, 200, 200);
   ctx.draw();
   
   setTimeout(() => {
       uni.canvasToTempFilePath({
           canvasId: 'shareCanvas',
           success(res) {
               uni.saveImageToPhotosAlbum({
                   filePath: res.tempFilePath,
                   success() {
                       uni.showToast({ title: '图片已保存' });
                   }
               });
           }
       });
   }, 500);

3. 分享图片
   使用 uni.share 分享生成的图片：

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

使用插件或第三方库

1. uQRCode 生成二维码分享图
   如果需要包含二维码，可以使用 uQRCode 插件：

   import uQRCode from '@/uni_modules/uqrcode';
   
   uQRCode.make({
       canvasId: 'qrcodeCanvas',
       size: 200,
       text: 'https://example.com',
       success(res) {
           console.log('二维码生成成功', res);
       }
   });

2. html2canvas 替代方案
   如果需要更复杂的绘图，可以结合 html2canvas 的类似实现（需引入第三方库或服务端渲染）。

   

注意事项

• 权限问题：在保存图片时，需检查用户是否授权相册权限（iOS/Android 可能需要动态申请）。
• 图片加载：确保网络图片加载完成后再绘制，否则可能渲染失败。
• 跨平台适配：不同平台（H5、小程序、App）的 canvas API 略有差异，需测试兼容性。

通过以上方法，可以在 uniapp 中实现自定义分享图功能。