SVG to Image export performance issues (using canv

I am using canvg to convert a chart svg to an image. We have the issue that by default not all CSS attributes are applied to the image so we ended up using getComputedStyle in a loop.

This is a total mess under performance aspects if we have 10 or even 20 charts to be exported at once.

var labels = ['2018-10-01', '2018-10-02', '2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08', '2018-10-09', '2018-10-10', '2018-10-11', '2018-10-12', '2018-10-13', '2018-10-14', '2018-10-15', '2018-10-16', '2018-10-17', '2018-10-18', '2018-10-19', '2018-10-20', '2018-10-21', '2018-10-22', '2018-10-23', '2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27', '2018-10-28', '2018-10-29', '2018-10-30', '2018-10-31', '2018-11-01', '2018-11-02', '2018-11-03', '2018-11-04', '2018-11-05', '2018-11-06', '2018-11-07', '2018-11-08', '2018-11-09', '2018-11-10', '2018-11-11', '2018-11-12', '2018-11-13', '2018-11-14', '2018-11-15', '2018-11-16', '2018-11-17', '2018-11-18', '2018-11-19', '2018-11-20', '2018-11-21', '2018-11-22', '2018-11-23', '2018-11-24', '2018-11-25', '2018-11-26', '2018-11-27', '2018-11-28', '2018-11-29', '2018-11-30', '2018-12-01', '2018-12-02', '2018-12-03', '2018-12-04', '2018-12-05', '2018-12-06', '2018-12-07', '2018-12-08', '2018-12-09', '2018-12-10', '2018-12-11', '2018-12-12', '2018-12-13', '2018-12-14', '2018-12-15', '2018-12-16', '2018-12-17', '2018-12-18', '2018-12-19', '2018-12-20', '2018-12-21', '2018-12-22', '2018-12-23', '2018-12-24', '2018-12-25', '2018-12-26', '2018-12-27', '2018-12-28', '2018-12-29', '2018-12-30', '2018-12-31', '2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-12', '2019-01-13', '2019-01-14', '2019-01-15', '2019-01-16', '2019-01-17', '2019-01-18', '2019-01-19', '2019-01-20', '2019-01-21', '2019-01-22', '2019-01-23', '2019-01-24', '2019-01-25', '2019-01-26', '2019-01-27', '2019-01-28', '2019-01-29', '2019-01-30', '2019-01-31', '2019-02-01', '2019-02-02', '2019-02-03', '2019-02-04', '2019-02-05', '2019-02-06', '2019-02-07', '2019-02-08', '2019-02-09', '2019-02-10', '2019-02-11', '2019-02-12', '2019-02-13', '2019-02-14', '2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21', '2019-02-22', '2019-02-23', '2019-02-24', '2019-02-25', '2019-02-26', '2019-02-27', '2019-02-28'];
var columns = ['data101', 'data2', 'data347'];
var data = [

  [0, 0, 2, 2, 1, 2, 7, 3, 1, 7, 5, 5, 5, 5, 6, 6, 11, 7, 2, 7, 16, 7, 3, 5, 10, 9, 11, 7, 3, 7, 7, 10, 10, 9, 18, 10, 20, 13, 9, 19, 16, 13, 20, 18, 14, 15, 18, 20, 19, 11, 13, 13, 12, 16, 11, 12, 21, 20, 23, 19, 19, 23, 23, 24, 23, 25, 21, 23, 20, 22, 21, 23, 24, 25, 27, 29, 28, 25, 24, 17, 20, 24, 22, 27, 21, 27, 19, 26, 31, 27, 28, 27, 21, 20, 27, 22, 22, 19, 17, 21, 23, 19, 22, 20, 21, 25, 15, 19, 20, 19, 21, 28, 17, 20, 14, 18, 17, 20, 27, 21, 18, 18, 20, 16, 27, 16, 16, 9, 18, 8, 19, 13, 8, 16, 15, 16, 9, 15, 10, 13, 10, 11, 10, 13, 12, 7, 14, 16, 13, 14, 8],
  [0, 0, 338, 1201, 1268, 1371, 1286, 1148, 446, 288, 228, 253, 193, 201, 283, 393, 436, 379, 421, 444, 444, 417, 513, 353, 364, 399, 238, 191, 305, 337, 365, 349, 365, 244, 101, 39, 55, 72, 151, 98, 31, 127, 114, 92, 104, 196, 307, 245, 84, 168, 41, 38, 292, 488, 536, 569, 495, 448, 408, 358, 344, 380, 328, 334, 332, 330, 345, 312, 369, 377, 356, 301, 226, 273, 237, 116, 178, 133, 114, 138, 95, 143, 74, 74, 83, 47, 75, 101, 96, 59, 46, 128, 70, 57, 93, 80, 94, 93, 63, 86, 81, 63, 70, 102, 91, 67, 69, 68, 88, 76, 79, 70, 119, 88, 74, 94, 76, 54, 82, 90, 75, 130, 67, 78, 106, 91, 81, 27, 77, 21, 104, 83, 55, 60, 62, 304, 393, 191, 292, 77, 76, 55, 125, 89, 99, 127, 60, 75, 99, 120, 56],
  [0, 0, 0, 1419, 7454, 12638, 10944, 7652, 4272, 11219, 9071, 7207, 7929, 8373, 9566, 6310, 7406, 9286, 8415, 7659, 6457, 3380, 10902, 10952, 10508, 7219, 4625, 4484, 4396, 5178, 5991, 7927, 14132, 14307, 5094, 10011, 6257, 9184, 18574, 12597, 11415, 7118, 9991, 10225, 14337, 4417, 12701, 17833, 23553, 10037, 4833, 5894, 19421, 14735, 12597, 8730, 5888, 11836, 13143, 17219, 10492, 10528, 8649, 11868, 10502, 6758, 7672, 8479, 11142, 22330, 26595, 4423, 17434, 8709, 9657, 7823, 9135, 19765, 18016, 16010, 8419, 7300, 8877, 9611, 9050, 8680, 8211, 6635, 3069, 10739, 6288, 6761, 7807, 16243, 20415, 23051, 19727, 8721, 6445, 8585, 13688, 14728, 17113, 16255, 3898, 4622, 3869, 3774, 4190, 3461, 4824, 4608, 4613, 3677, 3648, 3575, 3556, 4036, 3732, 2517, 4676, 4129, 3250, 4142, 3987, 4396, 3362, 2964, 1849, 2609, 2851, 3003, 3583, 3473, 3190, 2658, 4363, 3959, 4588, 3771, 4315, 3178, 3354, 3159, 2695, 4114, 4292, 3322, 1218, 3526, 3717]
];
var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;

//prepare chart data
var columnData = [];
var chartDataColumns = [];
var chartData = [];

chartData.push([columns[0]].concat(data[0]));

chartDataColumns = [
  ['x'].concat(labels)
].concat(chartData);

var chart1 = c3.generate({
  bindto: d3.select('#chart1'),
  data: {
    x: 'x',
    columns: [['x'].concat(labels)].concat(chartData),
    type: 'line',
    onmouseover: function(d) {
      chart1.focus(d.id);
      chart2.focus(d.id);
    },
    onmouseout: function() {
      chart1.revert();
      chart2.revert();
    }
  },
  legend: {
    position: 'right',
    show: true,
    item: {
      onclick: function(id) {
        if (chart1) chart1.toggle(id);
        if (chart2) chart2.toogle(id);
      },
      onmouseover: function(id) {
        if (chart1) chart1.focus(id);
        if (chart2) chart2.focus(id);
      },
      onmouseout: function(id) {
        if (chart1) chart1.revert();
        if (chart2) chart2.revert();
      }
    }
  },
  tooltip: {
    show: true,
    format: {
      value: function(value) {
        return d3.format(",.0f")(value);
      }
    }
  },
  zoom: {
    enabled: true
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        rotate: 90,
        format: '%Y-%m-%d'
      }
    },
    y: {
      label: 'sample-data',
      tick: {
        format: d3.format(",")
      }
    }
  },
  color: {
    pattern: colors
  }
});


var chart2 = c3.generate({
  bindto: d3.select('#chart2'),
  data: {
    columns: [[columns[0]].concat(data[0])],
    type: 'pie',
    onmouseover: function(id) {
      if (chart1) chart1.focus(id);
      if (chart2) chart2.focus(id);
    },
    onmouseout: function(id) {
      if (chart1) chart1.revert();
      if (chart2) chart2.revert();
    }
  },
  legend: {
    position: 'right',
    show: true,
    item: {
      onclick: function(id) {
        if (chart1) chart1.toggle(id);
        if (chart2) chart2.toogle(id);
      },
      onmouseover: function(id) {
        if (chart1) chart1.focus(id);
        if (chart2) chart2.focus(id);
      },
      onmouseout: function(id) {
        if (chart1) chart1.revert();
        if (chart2) chart2.revert();
      }
    }

  },
  color: {
    pattern: colors
  },
});



for (var i = 1; i < columns.length; i++) {
  setTimeout(function(column) {
    chart1.load({
      columns: [
        [columns[column]].concat(data[column])
      ]
    });
    chart2.load({
      columns: [[columns[column]].concat(data[column])]
    });

  }, (i * 5000 / columns.length), i);
}

document.getElementById("exportButton").onclick = function() {
  exportChartToImage();
};

function exportChartToImage() {
  var createImagePromise = new Promise(function(resolve, reject) {
    var images = [];
    d3.selectAll('svg').each(function() {
      if (this.parentNode) {
        images.push(getSvgImage(this.parentNode, true));
      }
    });
    if (images.length > 0)
      resolve(images);
    else
      reject(images);
  });
  createImagePromise.then(function(images) {
      images.forEach(function(img, n) {
        img.toBlob(function(blob) {
          saveAs(blob, "image_" + (n + 1) + ".png");
        });
      });
    })
    .catch(function(error) {
      throw error;
    });
};

/**
 * Converts a SVG-Chart to a canvas and returns it.
 */
function getSvgImage(svgContainer, png) {
  var svgEl = d3.select(svgContainer).select('svg').node();
  var svgCopyEl = svgEl.cloneNode(true);


  if (!svgCopyEl)
    return;
  //remove elements not for printing
  lensObject = d3.selectAll(".hidden-print").remove().exit();

  //add temp document objects
  var emptySvgEl = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "svg")).attr("id", "emptysvg")
    .attr("version", 1.1)
    .attr("height", 2)
    .node();
  var canvasComputed = d3.select(document.createElement("canvas")).attr("id", "canvasComputed").node();

  var container = d3.select(document.createElement("div")).attr("style", "display: none;")
    .attr("class", "c3").node();
  svgContainer.append(container);
  container.append(svgCopyEl);
  container.append(emptySvgEl);
  container.append(canvasComputed);

  //apply all CSS styles to SVG
  exportStyles(svgCopyEl, emptySvgEl);

  // transform SVG to canvas using external canvg
  canvg(canvasComputed, new XMLSerializer().serializeToString(svgCopyEl));

  //remove temp document objects
  canvasComputed.remove();
  emptySvgEl.remove();
  svgCopyEl.remove();

  container.remove();

  return canvasComputed;
}

function exportStyles(svg, emptySvg) {
  var tree = [];
  var emptySvgDeclarationComputed = getComputedStyle(emptySvg);
  //d3.select(svg).selectAll().each(function() {
  $(svg).find("*").each(function() {
    explicitlySetStyle(this, emptySvgDeclarationComputed);
  });
}


function traverse(obj, tree) {
  tree.push(obj);
  if (obj.hasChildNodes()) {
    var child = obj.firstChild;
    while (child) {
      if (child.nodeType === 1 && child.nodeName != 'SCRIPT') {
        traverse(child, tree);
      }
      child = child.nextSibling;
    }
  }
  return tree;
}

function explicitlySetStyle(element, emptySvgDeclarationComputed) {
  var cSSStyleDeclarationComputed = getComputedStyle(element);
  var i, len, key, value;
  var computedStyleStr = "";
  for (i = 0, len = cSSStyleDeclarationComputed.length; i < len; i++) {
    key = cSSStyleDeclarationComputed[i];
    value = cSSStyleDeclarationComputed.getPropertyValue(key);
    if (value !== emptySvgDeclarationComputed.getPropertyValue(key)) {
      if (key == 'visibility' && value == 'hidden') {
        computedStyleStr += 'display: none;';
      } else {
        computedStyleStr += key + ":" + value + ";";
      }
    }
  }
  element.setAttribute('style', computedStyleStr);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>
<!-- Required to convert named colors to RGB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<!-- Optional if you want blur -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<!-- Main canvg code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chart1" class "c3">

</div>

<div id="chart2" class="c3">

</div>

<button type="button" id="exportButton">
export to SVG
</button>

=> http://jsfiddle.net/gothmogg/jLt3yq75/

This sample shows exemplary how we apply the CSS styles to the SVG. If we use normal canvg without getComputedStyle the x and y axes of the c3 chart look like a total mess...

Do you know faster way to get valid images? Is there a way to filter the CSS-styles? Maybe use "c3" styles only?

标签： javascript svg canvg export-to-image

1条回答

傲

2楼-- · 2019-09-03 13:41

I have managed to solve the performance problems of exporting C3 SVG charts to PNG by avoiding to use getComputedStyle.

Browsing the issues in C3 I found issue #313

https://github.com/c3js/c3/issues/313

For others http://www.nihilogic.dk/labs/canvas2image/ might also be a good place to look at but I found a solution at https://gist.github.com/aendrew/1ad2eed6afa29e30d52e#file-exportchart-js-L29.

I have changed the code from using angular to d3 and now it works (for me).

Hopefully this might help others having the same issue.

Here the working code. Please note: the css styles are only examined and inlined once.

var labels = ['2018-10-01', '2018-10-02', '2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08', '2018-10-09', '2018-10-10', '2018-10-11', '2018-10-12', '2018-10-13', '2018-10-14', '2018-10-15', '2018-10-16', '2018-10-17', '2018-10-18', '2018-10-19', '2018-10-20', '2018-10-21', '2018-10-22', '2018-10-23', '2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27', '2018-10-28', '2018-10-29', '2018-10-30', '2018-10-31', '2018-11-01', '2018-11-02', '2018-11-03', '2018-11-04', '2018-11-05', '2018-11-06', '2018-11-07', '2018-11-08', '2018-11-09', '2018-11-10', '2018-11-11', '2018-11-12', '2018-11-13', '2018-11-14', '2018-11-15', '2018-11-16', '2018-11-17', '2018-11-18', '2018-11-19', '2018-11-20', '2018-11-21', '2018-11-22', '2018-11-23', '2018-11-24', '2018-11-25', '2018-11-26', '2018-11-27', '2018-11-28', '2018-11-29', '2018-11-30', '2018-12-01', '2018-12-02', '2018-12-03', '2018-12-04', '2018-12-05', '2018-12-06', '2018-12-07', '2018-12-08', '2018-12-09', '2018-12-10', '2018-12-11', '2018-12-12', '2018-12-13', '2018-12-14', '2018-12-15', '2018-12-16', '2018-12-17', '2018-12-18', '2018-12-19', '2018-12-20', '2018-12-21', '2018-12-22', '2018-12-23', '2018-12-24', '2018-12-25', '2018-12-26', '2018-12-27', '2018-12-28', '2018-12-29', '2018-12-30', '2018-12-31', '2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-12', '2019-01-13', '2019-01-14', '2019-01-15', '2019-01-16', '2019-01-17', '2019-01-18', '2019-01-19', '2019-01-20', '2019-01-21', '2019-01-22', '2019-01-23', '2019-01-24', '2019-01-25', '2019-01-26', '2019-01-27', '2019-01-28', '2019-01-29', '2019-01-30', '2019-01-31', '2019-02-01', '2019-02-02', '2019-02-03', '2019-02-04', '2019-02-05', '2019-02-06', '2019-02-07', '2019-02-08', '2019-02-09', '2019-02-10', '2019-02-11', '2019-02-12', '2019-02-13', '2019-02-14', '2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21', '2019-02-22', '2019-02-23', '2019-02-24', '2019-02-25', '2019-02-26', '2019-02-27', '2019-02-28'];
var columns = ['data101', 'data2', 'data347'];
var data = [

  [0, 0, 2, 2, 1, 2, 7, 3, 1, 7, 5, 5, 5, 5, 6, 6, 11, 7, 2, 7, 16, 7, 3, 5, 10, 9, 11, 7, 3, 7, 7, 10, 10, 9, 18, 10, 20, 13, 9, 19, 16, 13, 20, 18, 14, 15, 18, 20, 19, 11, 13, 13, 12, 16, 11, 12, 21, 20, 23, 19, 19, 23, 23, 24, 23, 25, 21, 23, 20, 22, 21, 23, 24, 25, 27, 29, 28, 25, 24, 17, 20, 24, 22, 27, 21, 27, 19, 26, 31, 27, 28, 27, 21, 20, 27, 22, 22, 19, 17, 21, 23, 19, 22, 20, 21, 25, 15, 19, 20, 19, 21, 28, 17, 20, 14, 18, 17, 20, 27, 21, 18, 18, 20, 16, 27, 16, 16, 9, 18, 8, 19, 13, 8, 16, 15, 16, 9, 15, 10, 13, 10, 11, 10, 13, 12, 7, 14, 16, 13, 14, 8],
  [0, 0, 338, 1201, 1268, 1371, 1286, 1148, 446, 288, 228, 253, 193, 201, 283, 393, 436, 379, 421, 444, 444, 417, 513, 353, 364, 399, 238, 191, 305, 337, 365, 349, 365, 244, 101, 39, 55, 72, 151, 98, 31, 127, 114, 92, 104, 196, 307, 245, 84, 168, 41, 38, 292, 488, 536, 569, 495, 448, 408, 358, 344, 380, 328, 334, 332, 330, 345, 312, 369, 377, 356, 301, 226, 273, 237, 116, 178, 133, 114, 138, 95, 143, 74, 74, 83, 47, 75, 101, 96, 59, 46, 128, 70, 57, 93, 80, 94, 93, 63, 86, 81, 63, 70, 102, 91, 67, 69, 68, 88, 76, 79, 70, 119, 88, 74, 94, 76, 54, 82, 90, 75, 130, 67, 78, 106, 91, 81, 27, 77, 21, 104, 83, 55, 60, 62, 304, 393, 191, 292, 77, 76, 55, 125, 89, 99, 127, 60, 75, 99, 120, 56],
  [0, 0, 0, 1419, 7454, 12638, 10944, 7652, 4272, 11219, 9071, 7207, 7929, 8373, 9566, 6310, 7406, 9286, 8415, 7659, 6457, 3380, 10902, 10952, 10508, 7219, 4625, 4484, 4396, 5178, 5991, 7927, 14132, 14307, 5094, 10011, 6257, 9184, 18574, 12597, 11415, 7118, 9991, 10225, 14337, 4417, 12701, 17833, 23553, 10037, 4833, 5894, 19421, 14735, 12597, 8730, 5888, 11836, 13143, 17219, 10492, 10528, 8649, 11868, 10502, 6758, 7672, 8479, 11142, 22330, 26595, 4423, 17434, 8709, 9657, 7823, 9135, 19765, 18016, 16010, 8419, 7300, 8877, 9611, 9050, 8680, 8211, 6635, 3069, 10739, 6288, 6761, 7807, 16243, 20415, 23051, 19727, 8721, 6445, 8585, 13688, 14728, 17113, 16255, 3898, 4622, 3869, 3774, 4190, 3461, 4824, 4608, 4613, 3677, 3648, 3575, 3556, 4036, 3732, 2517, 4676, 4129, 3250, 4142, 3987, 4396, 3362, 2964, 1849, 2609, 2851, 3003, 3583, 3473, 3190, 2658, 4363, 3959, 4588, 3771, 4315, 3178, 3354, 3159, 2695, 4114, 4292, 3322, 1218, 3526, 3717]
];
var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;

//prepare chart data
var columnData = [];
var chartDataColumns = [];
var chartData = [];

var C3Styles = null;


chartData.push([columns[0]].concat(data[0]));

chartDataColumns = [
  ['x'].concat(labels)
].concat(chartData);

var chart1 = c3.generate({
  bindto: d3.select('#chart1'),
  data: {
    x: 'x',
    columns: [
      ['x'].concat(labels)
    ].concat(chartData),
    type: 'line',
    onmouseover: function(d) {
      chart1.focus(d.id);
      chart2.focus(d.id);
    },
    onmouseout: function() {
      chart1.revert();
      chart2.revert();
    }
  },
  legend: {
    position: 'right',
    show: true,
    item: {
      onclick: function(id) {
        if (chart1) chart1.toggle(id);
        if (chart2) chart2.toogle(id);
      },
      onmouseover: function(id) {
        if (chart1) chart1.focus(id);
        if (chart2) chart2.focus(id);
      },
      onmouseout: function(id) {
        if (chart1) chart1.revert();
        if (chart2) chart2.revert();
      }
    }
  },
  tooltip: {
    show: true,
    format: {
      value: function(value) {
        return d3.format(",.0f")(value);
      }
    }
  },
  zoom: {
    enabled: true
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        rotate: 90,
        format: '%Y-%m-%d'
      }
    },
    y: {
      label: 'sample-data',
      tick: {
        format: d3.format(",")
      }
    }
  },
  color: {
    pattern: colors
  }
});


var chart2 = c3.generate({
  bindto: d3.select('#chart2'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(id) {
      if (chart1) chart1.focus(id);
      if (chart2) chart2.focus(id);
    },
    onmouseout: function(id) {
      if (chart1) chart1.revert();
      if (chart2) chart2.revert();
    }
  },
  legend: {
    position: 'right',
    show: true,
    item: {
      onclick: function(id) {
        if (chart1) chart1.toggle(id);
        if (chart2) chart2.toogle(id);
      },
      onmouseover: function(id) {
        if (chart1) chart1.focus(id);
        if (chart2) chart2.focus(id);
      },
      onmouseout: function(id) {
        if (chart1) chart1.revert();
        if (chart2) chart2.revert();
      }
    }

  },
  color: {
    pattern: colors
  },
});



for (var i = 1; i < columns.length; i++) {
  setTimeout(function(column) {
    chart1.load({
      columns: [
        [columns[column]].concat(data[column])
      ]
    });
    chart2.load({
      columns: [
        [columns[column]].concat(data[column])
      ]
    });

  }, (i * 5000 / columns.length), i);
}

document.getElementById("exportButton").onclick = function() {
  exportChartToImage();
};

function exportChartToImage() {
  var createImagePromise = new Promise(function(resolve, reject) {
    var images = [];
    d3.selectAll('svg').each(function() {
      if (this.parentNode) {
        images.push(getSvgImage(this.parentNode, true));
      }
    });
    if (images.length > 0)
      resolve(images);
    else
      reject(images);
  });
  createImagePromise.then(function(images) {
      images.forEach(function(img, n) {
        img.toBlob(function(blob) {
          saveAs(blob, "image_" + (n + 1) + ".png");
        });
      });
    })
    .catch(function(error) {
      throw error;
    });
};

/**
 * Converts a SVG-Chart to a canvas and returns it.
 */
function getSvgImage(svgContainer, png) {
  var svgEl = d3.select(svgContainer).select('svg').node();
  var svgCopyEl = svgEl.cloneNode(true);


  if (!svgCopyEl)
    return;
  //remove elements not for printing
  lensObject = d3.selectAll(".hidden-print").remove().exit();

  //add temp document objects
  var canvasComputed = d3.select(document.createElement("canvas")).attr("id", "canvasComputed").node();
  var container = d3.select(document.createElement("div")).attr("style", "display: none;")
    .attr("class", "c3").node();
  svgContainer.append(container);
  container.append(svgCopyEl);
  container.append(canvasComputed);


  /* taken from https://gist.github.com/aendrew/1ad2eed6afa29e30d52e#file-exportchart-js 
  	and changed from, angular to D3 functions
  */
  /* Take styles from CSS and put as inline SVG attributes so that Canvg
           can properly parse them. */

  var chartStyle;
  if (!C3Styles) {
    // Get rules from c3.css
    var styleSheets = document.styleSheets;
    for (var i = 0; i <= styleSheets.length - 1; i++) {
      if (styleSheets[i].href && (styleSheets[i].href.indexOf('c3.min.css') !== -1 || styleSheets[i].href.indexOf('c3.css') !== -1)) {
        try {
          if (styleSheets[i].rules !== undefined) {
            chartStyle = styleSheets[i].rules;
          } else {
            chartStyle = styleSheets[i].cssRules;
          }
          break;
        }

        //Note that SecurityError exception is specific to Firefox.
        catch (e) {
          if (e.name == 'SecurityError') {
            console.log("SecurityError. Cant read: " + styleSheets[i].href);
            continue;
          }
        }
      }
      if (chartStyle !== null && chartStyle !== undefined) {
        C3Styles = {};
        var selector;
        // Inline apply all the CSS rules as inline
        for (i = 0; i < chartStyle.length; i++) {
          if (chartStyle[i].type === 1) {
            selector = chartStyle[i].selectorText;
            var styleDec = chartStyle[i].style;
            for (var s = 0; s < styleDec.length; s++) {
              C3Styles[styleDec[s]] = styleDec[styleDec[s]];
            }
          }
        }
      }
    }
  }
  if (C3Styles)
    d3.select(svgCopyEl).selectAll('.c3:not(.c3-chart):not(path)').style(C3Styles);


  // SVG doesn't use CSS visibility and opacity is an attribute, not a style property. Change hidden stuff to "display: none"
  d3.select(svgCopyEl).selectAll('*')
    .filter(function(d) {
      return d && d.style && (d.style('visibility') === 'hidden' || d.style('opacity') === '0');
    })
    .style('display', 'none');
  //fix weird back fill
  d3.select(svgCopyEl).selectAll("path").attr("fill", "none");
  //fix no axes
  d3.select(svgCopyEl).selectAll("path.domain").attr("stroke", "black");
  //fix no tick
  d3.select(svgCopyEl).selectAll(".tick line").attr("stroke", "black");

  // transform SVG to canvas using external canvg
  canvg(canvasComputed, new XMLSerializer().serializeToString(svgCopyEl));

  //remove temp document objects
  canvasComputed.remove();
  svgCopyEl.remove();

  container.remove();

  return canvasComputed;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>
<!-- Required to convert named colors to RGB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<!-- Optional if you want blur -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<!-- Main canvg code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

<div id="chart1" class "c3">

</div>

<div id="chart2" class="c3">

</div>

<button type="button" id="exportButton">
export to SVG
</button>

Unfortunately

document.styleSheets[i].rules

can't be accessed in the script here. It worked in my environment though. Any idea why this does not work here?

0人赞添加讨论(0) 举报

SVG to Image export performance issues (using canv

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间