使用canvg将SVG转Canvas后toDataURL()返回局部黑底图像求助

I've run into this exact issue before with canvg and JPG exports—those black spots are almost always related to how JPG handles transparency (it doesn't support it natively) and canvg's default rendering behavior. Here are a few practical fixes you can try:

1. Pre-fill the Canvas with a White Background #

JPG replaces transparent pixels with black by default, so any transparent areas in your SVG will show up as black in the exported image. The fix is to draw a white rectangle covering the entire canvas before rendering the SVG:

// 创建Canvas
var myCanvas = document.createElement("CANVAS");
// 获取画布上下文并设置尺寸匹配SVG
var ctx = myCanvas.getContext("2d");
// 替换为你的SVG实际宽高（可从SVG元素的width/height属性获取）
myCanvas.width = res[0].width || 800;
myCanvas.height = res[0].height || 600;

// 填充白色背景
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);

// 用canvg渲染SVG（此时会覆盖在白色背景上）
canvg(myCanvas, res[0],{ ignoreMouse: true, ignoreAnimation: true , ignoreClear: true });

// 下载图像
var uri = myCanvas.toDataURL("image/jpeg", 0.9); // 第二个参数是JPG质量（0-1）
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 清理临时DOM元素

Pro Tip: If your SVG uses relative dimensions (like 100%), parse the SVG's bounding box first to set the canvas size accurately. You can use getBBox() on the SVG element if it's in the DOM.

2. Verify canvg Configuration #

You’ve set ignoreClear: true, which prevents canvg from clearing the canvas before rendering. This is fine if you’re pre-filling the background, but make sure this setting isn’t causing unexpected overlaps with previous canvas content. If you still see issues, try toggling this option to false (but keep the pre-filled white background).

3. Check for Transparent Elements in Your SVG #

Sometimes hidden or transparent elements in the SVG (like those with fill="transparent" or opacity="0") can cause black spots in the JPG export. Inspect your SVG code for these elements—remove unnecessary ones, or replace transparent fills with white where appropriate.

内容的提问来源于stack exchange，提问作者Muhammad Faheem Ansari