How to get background color of SVG converted properly into Canvas

前端未结

关注

 3  1713

迷失自我

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

相关标签:

3条回答

没有蜡笔的小新

2020-12-21 11:02
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 :)
0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2020-12-21 11:22

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

<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://rawgit.com/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>

0 讨论(0)

孤街浪徒

2020-12-21 11:27

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.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>

0 讨论(0)