如何通过Canvas drawImage()修改Font Awesome图标的颜色与背景？

问题场景 #

我需要通过Canvas的drawImage()方法渲染Font Awesome的SVG图标，基础渲染逻辑可以正常工作，但尝试修改图标填充色和背景色时，出现DOMException: The source image could not be decoded.错误，希望找到可行的修改方案。

基础渲染代码：

const context = document.getElementById("myCanvas").getContext('2d');

const image = new Image();
image.src = `https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg`;

image.onload = function(){
    context.drawImage(image, 0, 0, 100, 100);
};

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

尝试的修改代码（触发解码错误）：

const context = document.getElementById("myCanvas").getContext('2d');

modifyAndDraw(
  `https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg`,
  context
);
        
async function modifyAndDraw(iconUrl, ctx) {
  try {
    const svgText = await fetchData(iconUrl);
    const modifiedSvgText = modifySvgContent(svgText, '#ff0000', '#00ff00');
    const imageBitmap = await createImageBitmap(
      new Blob([modifiedSvgText], { type: 'image/svg+xml;charset=utf-8' })
    );
    ctx.drawImage(imageBitmap, 0, 0, 100, 100);
  } catch (error) {
    console.error('Error:', error);
  }
};

async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch data from ${url}`);
  }
  return response.text();
};

async function modifySvgContent(svgText, fillColor, backgroundColor) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(svgText, 'image/svg+xml');
  const svgElement = xmlDoc.documentElement;

  // Change fill color
  svgElement.querySelectorAll('[fill]').forEach((element) => {
    element.setAttribute('fill', fillColor);
  });

  // Add background color
  svgElement.setAttribute('style', `background-color: ${backgroundColor}`);

  return new XMLSerializer().serializeToString(svgElement);
};

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

错误原因 #

1. Blob解码兼容性问题：部分浏览器对createImageBitmap处理SVG Blob的支持不完善，容易触发解码失败；
2. SVG背景色设置错误：SVG元素本身不支持background-color样式，需要通过添加矩形元素实现背景色。

可行解决方案 #

方案一：Data URL替代Blob加载修改后的SVG #

将修改后的SVG转为Data URL，通过标准Image对象加载，避免解码兼容性问题：

const context = document.getElementById("myCanvas").getContext('2d');

modifyAndDraw(
  `https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg`,
  context,
  '#ff0000',
  '#00ff00'
);

async function modifyAndDraw(iconUrl, ctx, fillColor, bgColor) {
  try {
    const svgText = await fetchData(iconUrl);
    const modifiedSvg = modifySvgContent(svgText, fillColor, bgColor);
    // 转换为Data URL
    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvg)}`;
    
    const img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 100, 100);
    };
    img.onerror = (err) => console.error('图片加载失败:', err);
    img.src = dataUrl;
  } catch (error) {
    console.error('处理错误:', error);
  }
}

async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`获取资源失败: ${url}`);
  return response.text();
}

function modifySvgContent(svgText, fillColor, bgColor) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(svgText, 'image/svg+xml');
  const svg = xmlDoc.documentElement;
  
  // 修改所有元素的填充色
  svg.querySelectorAll('[fill]').forEach(el => el.setAttribute('fill', fillColor));
  
  // 添加背景矩形（插入到最底层）
  const rect = xmlDoc.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('width', '100%');
  rect.setAttribute('height', '100%');
  rect.setAttribute('fill', bgColor);
  svg.insertBefore(rect, svg.firstChild);
  
  return new XMLSerializer().serializeToString(svg);
}

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

方案二：Canvas直接绘制背景+叠加图标 #

如果不需要修改SVG本身，可以先在Canvas绘制背景矩形，再叠加渲染修改后的图标：

const context = document.getElementById("myCanvas").getContext('2d');

modifyAndDraw(
  `https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg`,
  context,
  '#ff0000',
  '#00ff00'
);

async function modifyAndDraw(iconUrl, ctx, fillColor, bgColor) {
  try {
    const svgText = await fetchData(iconUrl);
    const modifiedSvg = modifySvgContent(svgText, fillColor);
    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvg)}`;
    
    const img = new Image();
    img.onload = () => {
      // 先绘制背景
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, 100, 100);
      // 再绘制图标
      ctx.drawImage(img, 0, 0, 100, 100);
    };
    img.src = dataUrl;
  } catch (error) {
    console.error('处理错误:', error);
  }
}

async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`获取资源失败: ${url}`);
  return response.text();
}

function modifySvgContent(svgText, fillColor) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(svgText, 'image/svg+xml');
  const svg = xmlDoc.documentElement;
  
  svg.querySelectorAll('[fill]').forEach(el => el.setAttribute('fill', fillColor));
  
  return new XMLSerializer().serializeToString(svg);
}

关键修复点 #

• 用Data URL替代Blob传递SVG内容，规避浏览器解码兼容性问题；
• 通过添加SVG矩形元素实现背景色，而非使用无效的background-color样式；
• 修改SVG元素时，确保使用XML命名空间创建新元素（createElementNS）。

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