uniapp APP端使用html2canvas截图分享小程序卡片图片模糊、跨域等问题解决

// 引入html2canvas库
import html2canvas from 'html2canvas'
 
// 将html转换为canvas
function convertToCanvas(dom, callback) {
  html2canvas(dom).then(canvas => {
    // 处理canvas，如调整分辨率
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2); // 假设放大两倍
 
    // 将canvas转换为图片
    canvasToImage(canvas, callback);
  }).catch(error => {
    console.error('转换出错:', error);
  });
}
 
// 将canvas转换为图片
function canvasToImage(canvas, callback) {
  // 创建Image对象
  const img = new Image();
  img.src = canvas.toDataURL('image/png');
  img.onload = () => {
    callback(img); // 回调函数传递图片
  };
  img.onerror = () => {
    console.error('图片加载出错');
  };
}
 
// 使用示例
convertToCanvas(document.body, img => {
  // 在这里处理你的图片，如转发到微信小程序
  wx.updateShareMenu({
    withShareTicket: true,
    success() {
      // 设置分享的卡片
      wx.updateAppMessageShareData({
        title: '分享标题',
        desc: '分享描述',
        imageUrl: img.src, // 使用转换后的图片
        success: res => {
          console.log('分享成功', res);
        },
        fail: err => {
          console.error('分享失败', err);
        }
      });
    }
  });
});

这段代码首先引入了html2canvas库，然后定义了convertToCanvas函数，该函数接受DOM元素和回调函数作为参数，使用html2canvas将DOM转换为canvas，并通过调整分辨率来处理canvas。之后，使用canvasToImage函数将canvas转换为图片，并在转换完成后通过回调函数传递图片。最后，提供了使用示例，展示了如何在转换完成后，将图片用于微信小程序的分享卡片。