在移动设备上全尺寸下载Chartjs画布-编程知识-白鹭情

这是我在 bootstrap 和 chartjs 框架内构建的 Chartjs 画布。问题是我无法在移动设备等小荧屏上下载全宽影像。

---- Bootstrap 是必须的

--- 注意：如果您在示例中使荧屏宽度变小，然后单击下载，则输出将是该尺寸且很小。

HTML：

<div class="card">

  <div class="card-body">
    <h4 class="card-title mb-0"> Average </h4>

    <a data-name="avg-chart" id="downloadavg" download="searchtrends-average-position-chart.jpg" href="" class="download">
      <button class="btn btn-primary" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class=" bi bi-cloud-arrow-down-fill" viewBox="0 0 16 16">
          <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z" />
        </svg>
      </button>
    </a>
    <div class="c-chart-wrapper" id="avg-chart_parent">
      <canvas class="chart" id="avg-chart" style="height:300px;width:100%" height="300"></canvas>
    </div>
  </div>
</div>

JS：

new Chart(document.getElementById("avg-chart"),{"type":"line",
                      "data":{"labels":["2020.11.1","2020.11.2","2020.11.3","2020.11.4","2020.11.5","2020.11.6","2020.11.7","2020.11.7","2020.11.9","2020.11.10","2020.11.11","2020.11.12","2020.11.13","2020.11.14","2020.11.15","2020.11.16","2020.11.17","2020.11.18","2020.11.19","2020.11.20","2020.11.21","2020.11.22","2020.11.23","2020.11.24","2020.11.25","2020.11.26","2020.11.27","2020.11.28","2020.11.29","2020.11.30",],
                      "datasets":[{"label":"Average Position ",
                      "data":["11","12","13","14","15","16","17","18","19","19","19","19","19","19","19","19","19","19","19","20","21","22","23","24","25","26","27","28","29","30",],
                      "fill":false,"borderColor":"rgb(37,154,71)","lineTension":0.1}]}, options: {
        scales: {
            yAxes: [{
                ticks: {
                        reverse: true,
                }
            }],
            xAxes: [{
                type: 'time',
                distribution: 'series',
                time: {
          tooltipFormat:'MM/DD/YYYY', 
              }
        
                    }]
        },
        legend: {
            display: false,
            maxWidth: 9999
             
        }
    }});
    
    
        function downloadpng(chartname,chartid){
      var canvas = document.getElementById(chartname);
   var url_base64jp =canvas.toDataURL("image/jpg");
  var a =  document.getElementById(chartid);
  a.href = url_base64jp;
  }
//Download Chart Image
$('.download').on( 'click', function (event) {
  var chartname =  $(this).attr('data-name');
  var chartid =  $(this).attr('id'); 
    downloadpng(chartname,chartid);
 
});

我在这里做了一个例子：

http://jsfiddle.net/aneeshtan/vu27aew3/49/

如您所见，我无法在小荧屏中保存全尺寸画布（Chartjs）并自动更改比例。

我怎样才能下载全尺寸的 chartjs 画布。

uj5u.com热心网友回复：

为了获得更高分辨率的图表快照，您首先需要调整它的大小，然后等待它重新绘制。

最简单的方法是调整父级的大小并等待 ~ 300ms。
注意：如果您的图表更复杂（要绘制的资料明显更多），调整大小和重绘可能需要更长的时间，请随时相应地增加超时间隔 -321ms现在是。

因为需要等待图表调整大小，所以不能再使用初始点击。您需要在图表调整大小后触发另一个。

最后，我将href在下载后洗掉该值。如果我不这样做，随后单击该按钮将回传第一个快照，并且如果图表是动态的并且您希望能够再次对其进行快照而无需重绘页面。

代码如下所示：

function downloadImage(name, id) {
  setTimeout(() => {
    const a = $(id)[0];
    a.href = $(name)[0].toDataURL("image/jpg");
    a.click();
  }, 321)
}
$('.download').on('click', function(e) {
  const name = '#'   $(this).data('name');
  const id = '#'   this.id;
  const parent = $(name).parent();
  if (!$(this).attr('href')) {
    parent.css({ width: Math.max(1200, parent.width()) });
    downloadImage(name, id);
    e.preventDefault();
  } else {
    parent.css({ width: '' });
    setTimeout(() => $(id).attr('href', ''));
  }
});

随意更改1200为min-width您想要的图表。目前，如果显示的图表宽度大于该值，您将下载更大的影像，如您在评论中所说。我个人觉得这有点奇怪。

如果您改变主意，并希望下载的图表始终具有相同的大小（即使从较大的显示屏下载），请替换

parent.css({ width: Math.max(1200, parent.width()) });

和

parent.css({ width: 1920 }); // or whatever fixed chart width you want

看到它作业：http : //jsfiddle.net/websiter/Lzdc3bw1/

uj5u.com热心网友回复：

可以通过创建新canvas元素和新元素来应用自定义尺寸canvas context

function downloadpng(chartname, chartid) {
  var canvas = document.getElementById(chartname);
  var url_base64jp = canvas.toDataURL("image/jpg");
  var a = document.getElementById(chartid);
  
  var resizedCanvas = document.createElement("canvas");
  var resizedContext = resizedCanvas.getContext("2d");

  resizedCanvas.height = "1080";
  resizedCanvas.width = "1920";
  
  resizedContext.drawImage(canvas, 0, 0, 1920, 1080);
  
  url_base64jp = resizedCanvas.toDataURL("image/jpg");


  a.href = url_base64jp;
}