H5与小程序双端适配：UniApp中使用html2canvas和原生Canvas的完整解决方案

H5与小程序双端适配：UniApp中使用html2canvas和原生Canvas的完整解决方案

在跨平台开发中，将HTML内容转换为图片是一个常见需求，但不同平台的技术限制让这个看似简单的功能变得复杂。本文将深入探讨如何在UniApp框架下，同时兼容H5和小程序平台，实现高效、稳定的HTML转图片功能。

1. 技术选型与平台差异分析

实现HTML转图片主要有两种技术路线：html2canvas库和原生Canvas API。这两种方案各有优劣，且在不同平台上的支持程度差异显著。

平台兼容性对比表：

html2canvas作为成熟的H5解决方案，其核心原理是通过解析DOM树和CSS样式，在Canvas上重新绘制所有元素。然而小程序环境存在以下限制：

• 无法直接访问DOM API
• 缺少完整的CSSOM支持
• 图片资源存在跨域限制

2. H5端实现：html2canvas深度优化

在H5环境下，我们可以充分发挥html2canvas的能力，但需要注意以下几个关键点：

// 安装依赖
npm install html2canvas file-saver

核心实现代码：

import html2canvas from 'html2canvas';

async function exportToImage(selector) {
  const container = document.querySelector(selector);
  
  // 关键配置项
  const options = {
    useCORS: true, // 解决图片跨域
    scale: 2,      // 提高输出质量
    logging: false,
    allowTaint: true,
    backgroundColor: null
  };

  try {
    const canvas = await html2canvas(container, options);
    const dataUrl = canvas.toDataURL('image/png');
    
    // 保存到本地
    const link = document.createElement('a');
    link.download = 'export.png';
    link.href = dataUrl;
    link.click();
    
    return dataUrl;
  } catch (error) {
    console.error('导出失败:', error);
    throw error;
  }
}

常见问题解决方案：

1. 图片模糊问题：

   • 设置scale: 2提高分辨率
   • 使用window.devicePixelRatio动态调整

2. 跨域资源加载：

   • 服务端配置Access-Control-Allow-Origin
   • 图片添加crossOrigin="anonymous"属性

3. 字体渲染异常：

   • 使用@font-face预加载字体
   • 设置font-display: swap

3. 小程序端实现：原生Canvas绘制策略

小程序环境需要完全不同的实现方式。以下是微信小程序的典型实现：

// 获取DOM节点信息
const query = wx.createSelectorQuery();
query.select('#container').boundingClientRect();
query.exec((res) => {
  const rect = res[0];
  const ctx = wx.createCanvasContext('myCanvas');
  
  // 设置画布尺寸
  ctx.setCanvasSize(rect.width, rect.height);
  
  // 绘制背景
  ctx.setFillStyle('#ffffff');
  ctx.fillRect(0, 0, rect.width, rect.height);
  
  // 绘制文本
  ctx.setFontSize(16);
  ctx.setFillStyle('#333333');
  ctx.fillText('示例文本', 20, 30);
  
  // 绘制图片
  ctx.drawImage('/assets/logo.png', 50, 50, 100, 100);
  
  // 执行绘制
  ctx.draw(false, () => {
    wx.canvasToTempFilePath({