h5实现内嵌微信小程序&支付宝 --截图保存海报分享功能

一蓑烟雨，一任平生2025-09-03 11:11

1.首先需要正常写你需要展示的页面

2.下载html2canvas

复制代码

import html2canvas from 'html2canvas';

3.封装一个公共的方法

复制代码

export const screenshot = async () => {
  const target = document.querySelector('#capture-target');
  const canvas = await html2canvas(target, {
    useCORS: true, // 允许跨域图片
    allowTaint: true,
    scale: 2, // 照片质量
    allowTaint: false,
  });
  const imgUrl = canvas.toDataURL('image/png');
  return imgUrl;
};

4.拿到图片的imgUrl 再用一个弹框打开提醒用户长按保存

使用h5会经常遇到跨域的问题，因为我们展示img天生具有跨域的属性，但是一旦使用html2canvas 跨域会经常见到，所以一定要后端支持，如果图片保存在云盘可以设置

允许跨域

5.保存还有一个问题就是图片模糊可能会不清晰这时候需要把uni-app中的

<image>换成原生的<img>

不要使用图片背景直接使用图片