在Canvas上使用drawImage()方法绘制Font Awesome图标

Question

我需要使用drawImage()方法在画布上渲染Font Awesome图标。根据drawImage方法的说明，它接受多种类型的图像源，特别是包括HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas或VideoFrame等。我已经从Font Awesome仓库找到了一个SVG文件，例如这个日历图标：Font Awesome的日历SVG图标链接。

以下是我目前的代码实现：

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);
};

但是，这个SVG图标默认是黑色并带有白色背景。我希望在渲染之前能够改变图标的颜色和背景色。我应该如何操作？我尝试了下面的方法，但遇到了错误提示DOMException: The source image could not be decoded.，而且我觉得当前的方法可能并不正确...

以下是尝试修改颜色和背景色的代码片段，但未达到预期效果：

// ...之前的代码同上...

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);
  }
};

// ...其他辅助函数代码同上...

如何正确地在渲染到画布之前修改SVG图标的颜色和背景色呢？

David Hedlund · Answer

使用 createImageBitmap 直接配合包含已修改SVG数据的Blob理论上应可行，但从你的描述看，在解码此SVG数据时存在问题。作为替代方案，可以尝试利用 Image 对象结合数据URL来正确解码和渲染SVG数据。

以下是调整后的代码示例，区别在于使用了 Image 对象，并通过数据URL的形式设置修改后的SVG内容作为图像源：

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 image = new Image(); // 注意这里的变化
    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvgText)}`;
    image.onload = function() {
      ctx.drawImage(image, 0, 0, 100, 100);
    };
  } 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, backgroundColor) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(svgText, 'image/svg+xml');
  const svgElement = xmlDoc.documentElement;

  // 添加样式元素以改变填充颜色
  const styleElement = xmlDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleElement.textContent = `path { fill: ${fillColor}; }`;
  svgElement.insertBefore(styleElement, svgElement.firstChild);

  // 设置背景颜色
  svgElement.setAttribute('style', `background-color: ${backgroundColor}`);

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

vacawama · Answer

Font Awesome 提供的 SVG 图标没有指定任何 fill 属性，因此直接尝试改变它们的颜色是不会生效的。

对于只包含单一元素的 SVG 图标，你可以通过直接在路径标签中注入期望的填充色来实现颜色修改。

以下代码示例展示了这一过程：首先，从给定的 URL 获取 SVG 图标数据；然后，将 'purple' 作为填充色插入到标签中以修改图标颜色；接着，将修改后的 SVG 数据转换为 Blob 对象，并利用此 Blob 创建一个可被画布（canvas）绘制的图像；最后，在画布上绘制一个橙色的背景矩形以及修改了填充色的 SVG 图标。

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) {
  const svgText = await fetchData(iconUrl);
  const modifiedSvgText = svgText.replace(' {
    const img = new Image();
    img.src = url;
    img.onload = () => resolve(img);
  });
}