Safari下使用html-to-image转换含图片的SVG为PNG时图片丢失求助

问题原因 #

Safari 对通过 Data URL 加载的 SVG 有严格的安全限制：当 HTML 转图片类库将 DOM 节点序列化生成 SVG Data URL 后，Safari 会默认拦截该 SVG 内部引用的所有外部/内联图片资源，所以会出现图片丢失的问题，这是 Safari 本身的安全策略导致的问题，和 html-to-image、html2canvas 库的逻辑无关。

可落地解决方案 #

• 方案1：提前预处理 SVG 内部的图片资源

  1. 确保你要转换的SVG是直接内联在DOM节点中的，而不是通过 <img src="xxx.svg"> 的方式引入的，Safari 无法读取 img 标签内加载的SVG的内部资源
  2. 提前把 SVG 内所有 <image> 标签的 xlink:href/href 属性对应的图片资源转换为 Base64 格式，确保所有图片在执行转 PNG 逻辑前已经完全加载完成
  3. 补全 SVG 根节点的命名空间属性：xmlns="http://www.w3.org/2000/svg"、xmlns:xlink="http://www.w3.org/1999/xlink"，Safari 对 SVG 命名空间的要求远严格于 Chrome、Firefox
  4. 加载跨域图片时必须给图片对象设置 crossOrigin="anonymous" 属性，同时图片服务端必须配置正确的 CORS 响应头

• 方案2：使用 canvg 手动渲染 SVG 再导出 PNG（兼容性最高）
  可以先通过 canvg 把 SVG 内容直接绘制到 Canvas 上，再从 Canvas 导出 PNG，绕开 Safari 对 SVG Data URL 的资源限制，示例代码如下：

// 先引入canvg库
import { Canvg } from 'canvg';

const svgNode = document.querySelector('#item svg');
const canvas = document.createElement('canvas');
// 适配高清屏
const scale = window.devicePixelRatio || 1;
canvas.width = svgNode.clientWidth * scale;
canvas.height = svgNode.clientHeight * scale;
const ctx = canvas.getContext('2d');
ctx.scale(scale, scale);

// 序列化SVG为字符串
const svgStr = new XMLSerializer().serializeToString(svgNode);
// 用canvg渲染到canvas
const v = await Canvg.fromString(ctx, svgStr);
await v.render();

// 导出PNG
const pngDataUrl = canvas.toDataURL('image/png');
const img = new Image();
img.src = pngDataUrl;
document.body.appendChild(img);

• 方案3：针对 html-to-image 库增加兼容配置
  如果你要继续使用 html-to-image，可以在调用时添加以下配置项：

htmlToImage.toPng(node, {
  skipAutoScale: false,
  pixelRatio: window.devicePixelRatio || 1,
  cacheBust: true, // 强制重新加载资源，避免Safari缓存问题
  includeQueryParams: true
})

内容的提问来源于stack exchange，提问作者Martin P