javascript - 如何将 SVG 的背景颜色正确转换为 Canvas

Question

我使用 canvg 库将 d3 svg 对象转换为 Canvas 并将其显示为图像 (png)。

生成的图像具有透明背景，这不是我想要的。我需要这个有白色背景的。

所以我尝试设置 svg 元素的背景颜色。查看 svg 元素时很好，但转换后的图像仍然是透明的。我也尝试过更改 Canvas 对象的背景，但这也不起作用。

第一种方法(svg):

var svg = d3.select(".chart").append("svg").attr("style","background: white;")...

第二种方法( Canvas ):

canvg(document.getElementById('canvas'), $("#chart").html());

var canvas = document.getElementById('canvas');
canvas.style.background = 'white';
var img = canvas.toDataURL('image/png');
document.write('<img src="' + img + '"/>');  

有谁知道，我必须在哪个对象上设置背景颜色，以便在 png 图像中正确转换它？

编辑:根据 ThisOneGuys 答案中提到的信息，我找到了这个解决方案。

var svg = d3.select(".chart").append("svg") ...

svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white"); 

有了附加的矩形，我得到了我需要的:)

Answer 1

追加 <rect>是一种解决方案，另一种解决方案是在调用 `canvg' 方法后渲染背景颜色。

您可以从 Canvas API 调用每个绘图操作来绘制您的光栅化版本，因此可以使用 ctx.fillRect 填充背景.要使新绘图出现在背景中，您只需设置 globalCompositeOperation属性(property)destination-over .

var $container = $('#svg-container'),
      content = $container.html().trim(),
      canvas = document.getElementById('svg-canvas');

     // Since we will edit the canvas afterward, we need to remove that #!~$^ default mouseEvent listener
    canvg(canvas, content, {ignoreMouse: true});
     // now you've rendered your svg, you can draw the background on the canvas
    var ctx = canvas.getContext('2d');

     // all drawings will be made behind the already painted pixels
    ctx.globalCompositeOperation = 'destination-over'
      // set the color
    ctx.fillStyle = $container.find('svg').css('background-color');
     // draw the background
    ctx.fillRect(0, 0, canvas.width, canvas.height);


    var theImage = canvas.toDataURL('image/png');
    $('#svg-img').attr('src', theImage);

svg {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<section>
  <header>
    <h1>SVG:</h1>
  </header>
  <div id='svg-container'>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="60" cy="70" r=50 style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>
  </div>
</section>
<section>
  <header>
    <h1>Canvas:</h1>
  </header>
  <canvas id="svg-canvas"></canvas>
</section>
<section>
  <header>
    <h1>PNG:</h1>
  </header>
  <img id="svg-img" />
</section>