score:0

phantomjs will convert html + svg to an image. it would need to run server side as a separate process, but could be called from c#.

score:0

maybe you could try svg2bitmap to first convert the svg to an image, then use html2canvas. this is the approach used in this similar question.

score:3

i think dom-to-image.js is a bit more accurate than html to canvas, here are some tricks:

dom-to-image let you generate from html svg data url format, yes i know why would you do that, well it's more accurate, with that svg a image is painted inside a canvas (what you need in your case, or something more complex if you need entire page printed in an image as in my example). from that canvas you can pull the image, resize it, download it.

copyrights: http://jsfiddle.net/gregfedorov/qh9x5/9/ and http://jsfiddle.net/christopheviau/v6vmf/

///dom to svg module
document.getelementbyid('downloadbody').onclick= function(){
  var wrapper = document.getelementsbytagname("body")[0];
  //dom to image
  domtoimage.tosvg(wrapper).then(function (svgdataurl) {
  //download function    
  downloadpngfromanyimagesrc(svgdataurl);
  });
}

document.getelementbyid('downloadcircle').onclick= function(){
  var wrapper = document.getelementbyid('circle');
  //dom to image
  domtoimage.tosvg(wrapper).then(function (svgdataurl) {
  //download function    
  downloadpngfromanyimagesrc(svgdataurl);
  });
}

document.getelementbyid('downloadtable').onclick= function(){
  var wrapper = document.getelementbyid('table');
  //dom to image
  domtoimage.tosvg(wrapper).then(function (svgdataurl) {
  //download function    
  downloadpngfromanyimagesrc(svgdataurl);
  });
}

function downloadpngfromanyimagesrc(src)
{
  //recreate the image with src recieved
  var img = new image;
  //when image loaded (to know width and height)
  img.onload = function(){
    //drow image inside a canvas
    var canvas = convertimagetocanvas(img);
    //get image/png from convas
    var pngimage =  convertcanvastoimage(canvas);
    //download
    var anchor = document.createelement('a');
    anchor.setattribute('href', pngimage.src);
    anchor.setattribute('download', 'image.png');
    anchor.click();
  };
  
  img.src = src;


	// converts image to canvas; returns new canvas element
  function convertimagetocanvas(image) {
        var canvas = document.createelement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getcontext("2d").drawimage(image, 0, 0);
        return canvas;
    }
    
    
    // converts canvas to an image
    function convertcanvastoimage(canvas) {
        var image = new image();
        image.src = canvas.todataurl("image/png");
        return image;
    }
}



////// svg's generations

////circle modeule///////
var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
};

var width = 460,
    height = 300,
    radius = math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerradius(radius - 100)
    .outerradius(radius - 50);

var svg = d3.select("#circle").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectall("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);


// table module ////////////////////////////////////
var table = function module() {
    var opts = {
        width: 200,
        height: 200,
        margins: {top: 20, right: 20, bottom: 20, left: 20}
    };

    function exports(selection) {
        selection.each(function (dataset) {

            //________________________________________________
            // data
            //________________________________________________
            var columnlabel = dataset.columnlabel;
            var rowlabel = dataset.rowlabel;
            var value = dataset.value;

            //________________________________________________
            // dom preparation
            //________________________________________________
            // size
            var chartw = math.max(opts.width - opts.margins.left - opts.margins.right, 0.1);
            var charth = math.max(opts.height - opts.margins.top - opts.margins.bottom, 0.1);

            // svg
            var parentdiv = d3.select(this).html('');
            var svg = parentdiv.append('svg').attr('width', opts.width).attr('height', opts.height);
            var vissvg = svg.append('g').attr('class', 'vis-group').attr('transform', 'translate(' + opts.margins.left + ',' + opts.margins.top + ')');
            var tablebodysvg = vissvg.append('g').attr('class', 'chart-group');
            var tableheadersvg = vissvg.append('g').attr('class', 'chart-group');
            var rowheadersvg = tableheadersvg.append('g').attr('class', 'row-header');
            var colheadersvg = tableheadersvg.append('g').attr('class', 'col-header');

            //________________________________________________
            // table
            //________________________________________________
            var rowheaderlevelnum = 1;
            var colheaderlevelnum = 1;
            var cellh = charth / (value.length + rowheaderlevelnum);
            var cellw = chartw / (value[0].length + colheaderlevelnum);

            // row header
            var rowheadercell = rowheadersvg.selectall('rect.row-header-cell')
                .data(rowlabel);
            rowheadercell.enter().append('rect')
                .attr({
                    class:'row-header-cell',
                    width:cellw, height:cellh,
                    x: 0,
                    y: function(d, i){return i * cellh + (cellh * colheaderlevelnum)}
                })
                .style({fill:'#eee', stroke:'silver'});

            // row header text
            rowheadercell.enter().append('text')
                .attr({
                    class:'row-header-content',
                    x: 0,
                    y: function(d, i){return i * cellh + (cellh * colheaderlevelnum)},
                    dx: cellw/2,
                    dy: cellh/2
                })
                .style({fill:'black', 'text-anchor':'middle'})
                .text(function(d, i){return d;});

            // col header
            var colheadercell = colheadersvg.selectall('rect.col-header-cell')
                .data(columnlabel);
            colheadercell.enter().append('rect')
                .attr({
                    class:'col-header-cell',
                    width:cellw, height:cellh,
                    x: function(d, i){return i * cellw + (cellw * rowheaderlevelnum)},
                    y: 0
                })
                .style({fill:'#eee', stroke:'silver'});

            // col header text
            colheadercell.enter().append('text')
                .attr({
                    class:'col-header-content',
                    x: function(d, i){return i * cellw + (cellw * rowheaderlevelnum)},
                    y: 0,
                    dx: cellw/2,
                    dy: cellh/2
                })
                .style({fill:'black', 'text-anchor':'middle'})
                .text(function(d, i){return d;});

            // body
            var row = tablebodysvg.selectall('g.row')
                .data(value);
            row.enter().append('g')
                .attr('class', 'cell row')
                .each(function(pd, pi){
                    // cells
                    var cell = d3.select(this)
                        .selectall('rect.cell')
                        .data(pd);
                    cell.enter().append('rect')
                        .attr({
                            class:'cell', width:cellw, height:cellh,
                            x: function(d, i){return i * cellw + (cellw * rowheaderlevelnum)},
                            y: function(d, i){return pi * cellh + cellh}
                        })
                        .style({fill:'white', stroke:'silver'});
                    // text
                    cell.enter().append('text')
                        .attr({
                            class:'cell-content', width:cellw, height:cellh,
                            x: function(d, i){return i * cellw + (cellw * rowheaderlevelnum)},
                            y: function(d, i){return pi * cellh + cellh},
                            dx: cellw/2,
                            dy: cellh/2
                        })
                        .style({fill:'black', 'text-anchor':'middle'})
                        .text(function(d, i){return d;});
                });
        });
    }

    exports.opts = opts;
    createaccessors(exports, opts);
    return exports;
};
  
// helper function ////////////////////////////////////                       
var createaccessors = function(visexport) {
    for (var n in visexport.opts) {
        if (!visexport.opts.hasownproperty(n)) continue;
        visexport[n] = (function(n) {
            return function(v) {
                return arguments.length ? (visexport.opts[n] = v, this) : visexport.opts[n];
            }
        })(n);
    }
};                        
 
// usage ////////////////////////////////////                        
var dataset = {
    rowlabel: ['a', 'b', 'c', 'd', 'e'],
    columnlabel: ['p', 'q', 'r', 's'],
    value: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16], [17, 18, 19, 20]]
};
                        
var width = 400;
var height = 300;

var table = table().width(width).height(height);

d3.select('#table')
    .datum(dataset)
    .call(table);
body {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
  background-color:blue;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}
<script src="https://mbostock.github.io/d3/d3.js"></script>
<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<div>
using dom-to-image.js transform anny given html to a image (svg - no quality loss)<br>
  1. tansform html into svg<br>
  2. drow svg inside hidden canvas<br>
  3. export canvas jpg or png<br>
  4. i you like donwload the thing<br>
</div>
<button id='downloadbody'>download body</button>
<button id='downloadcircle'>download circle</button>
<button id='downloadtable'>download table</button>
<div id="circle">
</div>
<div id="table">
</div>


Related Query

More Query from same tag