如何在发送电子邮件时使用图表 js 在图像标签中将动态图作为图像答案

【问题标题】：how to put dynamic graph as image using chart js in image tag while sending email如何在发送电子邮件时使用图表 js 在图像标签中将动态图作为图像
【发布时间】：2019-08-16 14:05:51
【问题描述】：

假设我有电子邮件模板并且它包含动态图像生成

在我的电子邮件模板中

<td style="font-size:12px;color:#333333;padding:10px 10px 10px 0;">
 <img src="/index.php">
</td>

所以当有人打开电子邮件时，我只需运行 index.php 代码并返回由图表 js 生成的 base64 图像，我不知道正确的方法是什么

<script src="/plugins/jquery-3.3.1/jquery-3.3.1.slim.min.js"></script>
<body>
  <img src="https://cdn.pixabay.com/photo/2015/03/30/20/33/heart-700141_960_720.jpg">
  <canvas id="canvas" height="450" width="600"></canvas>
  <img id="url" />
</body>
<script type="text/javascript">
  var lineChartData = {
      labels : ["January","February","March","April","May","June","July"],
      datasets : [
          {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              pointColor : "rgba(220,220,220,1)",
              pointStrokeColor : "#fff",
              data : [65,59,90,81,56,55,40],
              bezierCurve : false
          }
      ]

  }

  function done(){
    alert("haha");
    var url=myLine.toBase64Image();
      console.log(url);

    document.getElementById("url").src=url;
  }
  var options = {
    bezierCurve : false,
    animation: {
      onComplete: done
    }
  };


  var myLine = new Chart(document.getElementById("canvas").getContext("2d"),{
      data:lineChartData,
    type:"line",
    options:options
  });
</script>
<?php
header('Content-type: image/png');

那么我怎样才能获得 base64 图像作为回报呢？

【问题讨论】：

Converting Chart.js canvas chart to image using .toDataUrl() results in blank image的可能重复
不重复，看它是用 laravel, php
我的观点是如何渲染图表 js 的图像让我们说带有动态数据的电子邮件模板中的条形图

标签： php laravel email

【解决方案1】：

您需要发送图片，因为电子邮件不会执行 Javascript。在您的响应中设置Content-type: image/png 不会神奇地将页面转换为图像，您需要实际返回具有 png 编码的数据！

最简单的方法可能是使用QuickChart，这是我构建的一个open source Web 服务，用于将Chart.js 对象呈现为图像。

根据您的问题，这可能是您的完整 Chart.js 配置：

{
  "type": "bar",
  "data": {
    "labels": [ "January", "February", "March", "April", "May", "June", "July"
    ],
    "datasets": [
      {
        "label": "My data",
        "fillColor": "rgba(220,220,220,0.5)",
        "strokeColor": "rgba(220,220,220,1)",
        "pointColor": "rgba(220,220,220,1)",
        "pointStrokeColor": "#fff",
        "data": [ 65, 59, 90, 81, 56, 55, 40 ],
        "bezierCurve": false
      }
    ]
  }
}

将其打包成一个 URL 并将其发送到 https://quickchart.io/chart?c= 端点。例如：

https://quickchart.io/chart?c={ "type": "bar", "data": { "labels": [ "January", "February", "March", "April", "May", "June", "July" ], "datasets": [ { "label": "My data", "fillColor": "rgba(220,220,220,0.5)", "strokeColor": "rgba(220,220,220,1)", "pointColor": "rgba(220,220,220,1)", "pointStrokeColor": "#fff", "data": [ 65, 59, 90, 81, 56, 55, 40 ], "bezierCurve": false } ] }}

不要忘记URL encode 您的查询参数（当您输入 URL 时，您的浏览器会自动执行此操作）。这是一个如何在 PHP 中执行此操作的示例：

$chart = '{
  "type": "bar",
  "data": {
    "labels": [ "January", "February", "March", "April", "May", "June", "July"
    ],
    "datasets": [
      {
        "label": "My data",
        "fillColor": "rgba(220,220,220,0.5)",
        "strokeColor": "rgba(220,220,220,1)",
        "pointColor": "rgba(220,220,220,1)",
        "pointStrokeColor": "#fff",
        "data": [ 65, 59, 90, 81, 56, 55, 40 ],
        "bezierCurve": false
      }
    ]
  }
}';

$encoded = urlencode($chart);
$imageUrl = "https://quickchart.io/chart?c=" . $encoded;

// Embed $imageUrl in your email...

当然，您可以使用自己的自定义值动态构造$chart，例如使用json_encode。但这超出了这个答案的范围。

生成的$imageURL 显示以下内容：

您可以从documentation 了解有关自定义 Chart.js 的更多信息。

这种方法的替代方法是弄清楚如何在您自己的后端呈现 Chart.js，或者使用支持 PHP 中服务器端图表生成的不同库。

【讨论】：

我们依赖这项服务吗？
你可以依赖 quickchart.io 或者选择自己托管，因为它是开源的
quickchart 和 chartjs 是两个不同的项目吧？
@DavidGarcia 没错。 Quickchart 是 Chart.js 的渲染服务。