JS下载添加文本的图像

JS Download Image With Text added

本文关键字：图像 文本 添加 下载 JS      更新时间：2023-09-26

我对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()
}

在将文本转换为 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>

相关文章：