javascript - How to get background color of SVG converted properly into Canvas - Stack Overflow

admin管理员组

文章数量:1313598

Im converting a d3 svg object with use of canvg library to an canvas and display it as an image (png).

The resulting image has a transparent background, which is not what I want. I need this with a white background.

So i tried to set the background color of svg element. When viewing svg element it is fine, but the converted image is still transparent. I also tried, to alter background of the canvas object, but this is also not working.

first approach (svg):

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

second aproach (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 + '"/>');  

Does anyone know, on which object I have to set the background color, in order to get it converted properly in png image ?

Edit: With the information mentioned in ThisOneGuys answers, I found this solution.

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

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

With the appended rect, I get what I need :)

Im converting a d3 svg object with use of canvg library to an canvas and display it as an image (png).

The resulting image has a transparent background, which is not what I want. I need this with a white background.

So i tried to set the background color of svg element. When viewing svg element it is fine, but the converted image is still transparent. I also tried, to alter background of the canvas object, but this is also not working.

first approach (svg):

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

second aproach (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 + '"/>');  

Does anyone know, on which object I have to set the background color, in order to get it converted properly in png image ?

Edit: With the information mentioned in ThisOneGuys answers, I found this solution.

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

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

With the appended rect, I get what I need :)

• javascript
• canvas
• d3.js
• svg

Share Improve this question Follow edited Apr 9, 2016 at 22:03 lunatikz asked Apr 9, 2016 at 21:29 lunatikzlunatikz 73611 gold badge1111 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

To append a <rect> is one solution, an other solution is to render the background color after you've called `canvg' method.

You can call every drawing operations from the canvas API to draw on your rasterized version so, it's possible to fill the background using ctx.fillRect. To make the new drawings appear in the background, you just have to set the globalCompositeOperation property to 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode./svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode./svn/trunk/canvg.js"></script>
<section>
  <header>
    <h1>SVG:</h1>
  </header>
  <div id='svg-container'>
    <svg xmlns="http://www.w3/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>

I have ran in to this before. As you know the CSS doesn't pass get put in the DOM, so it's not read by the conversion. So you have to do inline styling instead. But the way you are currently doing it is incorrect.

So instead of using :

.attr("style","background: white;").

You have to set the style like this :

.style('fill', 'white'); 

That should work fine :)

I'd "draw" the background in the svg with a rect:

<html>

<head>
  <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare./ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://rawgit./gabelerner/canvg/master/canvg.js"></script>
</head>

<body>
  <div class="chart" id="chart" style="width: 50%; margin: 0 auto;"></div>
  <!-- d3 code -->
  <script type="text/javascript">
    var svg = d3.select(".chart").append("svg")
    .attr("id", "mysvg")
    .attr("width", 500)
    .attr("height", 500);
    
    svg.append('rect')
      .attr('width', 500)
      .attr('height', 500)
      .style("fill", "red");
    
    svg.selectAll('.bar')
      .data([1,2,3,4])
      .enter()
      .append('rect')
      .attr('y', function(d,i){
        return d * 50;
      })
      .attr('height', function(d,i){
        return 500 - (d * 50);
      })
      .attr('width', 50)
      .attr('x', function(d,i){
        return i * 100;
      })
      .style('fill', 'steelblue');
    
  </script>
  <canvas id="canvas" width="200" height="200"></canvas>
  <script type="text/javascript">    
    var canvas = document.getElementById('canvas');
    canvg(document.getElementById('canvas'), $('#chart').html());
    var img = canvas.toDataURL('image/png');
    document.write('<img src="' + img + '"/>');
  </script>
</body>

</html>

本文标签： javascriptHow to get background color of SVG converted properly into CanvasStack Overflow