SVG中<image>标签无法通过Canvas导出为PNG的问题求助

核心原因 #

1. 跨域限制：当SVG以data:image/svg+xml;base64形式加载到Image对象时，其中引用的外部图片（如http://localhost:5173/test.png）会触发Canvas的同源策略限制。浏览器会阻止跨域资源被绘制到Canvas，导致导出的PNG丢失图片内容。
2. SVG data URI的资源加载限制：部分浏览器对以data URI形式存在的SVG加载外部资源有严格限制，即使是同域资源也可能无法正常加载。

解决方案 #

方案1：将外部图片转为data URI嵌入SVG #

把<image>标签的xlink:href替换为图片的base64格式data URI，彻底消除外部资源依赖。

步骤：

1. 将test.png转换为base64字符串（可通过本地工具或脚本实现）。
2. 修改SVG中的<image>标签：

<image
  x="199"
  y="139"
  width="50"
  height="50"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xlink:href="data:image/png;base64,【替换为你的test.png的base64字符串】"
  preserveAspectRatio="none"
  opacity="1"
/>

方案2：处理跨域并优化SVG加载方式（保留外部图片URL） #

如果必须使用外部图片URL，需满足以下条件：

1. 图片服务器添加CORS响应头（如Access-Control-Allow-Origin: *或指定你的域名），允许当前页面跨域加载图片。
2. 优化SVG的加载方式，避免base64编码可能带来的问题，同时设置跨域属性：

修改JS代码：

const img = new Image();
// 开启跨域模式
img.crossOrigin = "anonymous";

let svgUrl;

img.onload = () => {
  // 释放Blob URL资源
  URL.revokeObjectURL(svgUrl);
  
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  try {
    const dataURL = canvas.toDataURL(`image/png`);
    // 处理导出的dataURL
  } catch (e) {
    console.error("Canvas导出失败，可能是跨域资源未授权：", e);
  }
};

// 使用Blob URL加载SVG，替代base64编码，避免字符编码问题
const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
svgUrl = URL.createObjectURL(svgBlob);
img.width = width;
img.height = height;
img.src = svgUrl;

额外注意：SVG字符串编码问题 #

直接使用window.btoa(svgString)可能因SVG中存在非ASCII字符（如中文）导致编码错误。若坚持使用base64编码，需采用正确方式：

// 正确的SVG转base64编码
const encodedSvg = encodeURIComponent(svgString);
const base64Svg = btoa(unescape(encodedSvg));
img.src = `data:image/svg+xml;base64,${base64Svg}`;

内容的提问来源于stack exchange，提问作者Enes Kaplan