Как поместить динамический график в качестве изображения, используя диаграмму JS в теге изображения при отправке электронной почты - PullRequest
Новая
       2

Как поместить динамический график в качестве изображения, используя диаграмму JS в теге изображения при отправке электронной почты

0 голосов
/ 26 марта 2019

скажем, у меня есть шаблон электронной почты, и он содержит динамическое генерирование изображений

в моем шаблоне электронной почты 

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

, поэтому, когда кто-то открывает электронную почту, я просто запускаю этот код index.php и возвращаюИзображения base64, сгенерированные диаграммой js, я не понимаю, как правильно сделать это 

<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?

1 Ответ

1 голос
/ 29 марта 2019

Вам нужно будет отправить изображение, потому что электронная почта не будет выполнять Javascript. Но вы не сможете разместить Javascript на своей странице PHP и встроить тег изображения. Установка Content-type: image/png для изображения не делает вашу страницу волшебным образом, вам нужно возвращать данные в кодировке png!

Самый простой способ сделать это, вероятно, с помощью QuickChart , который является веб-службой с открытым исходным кодом , которую я создал для визуализации объекта 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={ "тип": "бар", "данные": {"метки": ["январь", "февраль", "март", "апрель", "май", "июнь" , "July"], "наборы данных": [{"label": "Мои данные", "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 кодировать ваш параметр запроса (ваш браузер автоматически делает это при вводе 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 отобразится следующее:

Chart image

Альтернативой этому подходу является выяснить, как визуализировать Chart.js на вашем собственном бэкэнде, или использовать другую библиотеку, которая поддерживает генерацию диаграмм на стороне сервера в PHP.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...