Question

我对Stack Overflow相对较新，所以在提出这个问题时我会尽量彻底和简洁。我正在研究一个项目，并且刚刚实现了一个函数来打印图形的png图像（使用D3.js）。现在我想在下载的png中添加日期（或文本）（仅在下载时）。我一直在尝试各种各样的事情，没有运气。有什么想法吗？

window.printPNG = function () {
    // Inputs
    var mySVG = document.getElementById('the-bubble-chart');
    var myXML = (new XMLSerializer()).serializeToString(mySVG);

    // Outputs
    var myCanvas = document.getElementById('canvg-output');
    var myImg = document.getElementById('png-output');
    var myA = document.getElementById('png-link');

    canvg(myCanvas, myXML);

    var dataURL = myCanvas.toDataURL('image/png');
    var dataURLHeaders = "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=download.png;";

    // Format file name for download
    var d = new Date(),
        dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

    myImg.src = dataURL;
    myA.href = dataURL.replace('data:', dataURLHeaders);
    myA.download = dateString + "_" + "download.png";
    myA.click()
}

Answer 1

您可以在将文本转换为png：

之前将文本直接添加到画布

...
canvg(myCanvas, myXML);

// Format file name for download
var d = new Date(),
dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

// add date to canvas
var ctx = myCanvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(dateString,10,50);

var dataURL = myCanvas.toDataURL('image/png');
...

完整代码：

<!DOCTYPE html>
<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 src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
  </head>

  <body>
    <svg id="the-bubble-chart" width="500" height="500"></svg>
    <canvas id="canvg-output"></canvas>
    <img id="png-output" /> <br><br>
    <a id="png-link">Click Here</a>
    <script>
  
    var svg = d3.select('#the-bubble-chart');

    svg.append("rect")
      .attr("width", 500)
      .attr("height", 500)
      .style("fill","lightblue");
    
    svg.selectAll('circle')
      .data([0,1,2,3])
      .enter()
      .append('circle')
      .attr('cx', function(d){
        return d * 100 + 50;
      })
      .attr('cy', function(d){
        return d * 100 + 50;
      })
      .attr('r', 30)
      .style('fill','red');
  
    window.printPNG = function() {
      // Inputs
      var mySVG = document.getElementById('the-bubble-chart');
      var myXML = (new XMLSerializer()).serializeToString(mySVG);
      
      console.log(myXML)

      // Outputs
      var myCanvas = document.getElementById('canvg-output');
      var myImg = document.getElementById('png-output');
      var myA = document.getElementById('png-link');

      canvg(myCanvas, myXML);
      
      // Format file name for download
      var d = new Date(),
        dateString = d.getMonth() + 1 + "-" + d.getDate() + "-" + d.getFullYear().toString();

      var ctx = myCanvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText(dateString,10,50);

      var dataURL = myCanvas.toDataURL('image/png');
      var dataURLHeaders = "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=download.png;";


      myImg.src = dataURL;
      myA.href = dataURL.replace('data:', dataURLHeaders);
      myA.download = dateString + "_" + "download.png";
      //myA.click()
    }
    
    printPNG();
  </script>
  </body>

</html>

JS下载图片添加文字

1 个答案: