Загрузка холста тепловой карты JS (пустой холст, хотя отображается тепловая карта)

Я хочу загрузить полученную тепловую карту JS, которую я создал с помощью setData моих собственных точек. Отображается тепловая карта, но когда я загружаю холст, я получаю пустое изображение.

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Heatmap Test Code</title>
<script src='http://www.patrick- 
wied.at/static/heatmapjs/assets/js/heatmap.min.js'></script>
</head>
<body>
  <div id = "heatMap" style = "height:740px">
        <canvas id = "myCanvas" width = "1024" height = "540" 
style = "position:absolute; left: 0; top: 0"></canvas>
  </div>
    <a id = "download" download = "triangle.jpeg"><button type = "button" 
onClick = "download()">Download</button></a>
    <img id = "myImage">

</body>
<script> 
  var heatmapInstance = h337.create({
    container: document.getElementById('heatMap')
  });

  var testData = {
        min: 0,
        max: 100,
        data: [{x: 807, y: 583, value: 500},{x: 770, y: 583, value: 500},{x: 
750, y: 583, value: 500},{x: 750, y: 583, value: 500},{x: 200, y: 583, 
value: 500},{x: 750, y: 583, value: 500}, {x: 597, y: 285, value: 51}, {x: 
217, y: 449, value: 73}, {x: 377, y: 656, value: 58}, {x: 467, y: 509, 
value: 47}, {x: 487, y: 164, value: 46}, {x: 247, y: 194, value: 35}]
  };
  heatmapInstance.setData(testData);

    function download(){
        var download = document.getElementById("download");
        var image = 
document.getElementById("myCanvas").toDataURL("image/png")
                .replace("image/png", "image/octet-stream");
          download.setAttribute("href", image);
}
</script>
</html>

javascript html canvas heatmap

11.06.2018 15:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

651

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы близки, установите Href для изображения, затем запустите загрузку:

link.href = document.getElementById("myCanvas").toDataURL();
link.download = 'image_name.png';

https://jsfiddle.net/zx23ep0g/15/

спасибо за правильный подход к загрузке. Я попробовал это с обычным простым холстом, и он работает, но моя проблема в том, что он все еще загружает пустые изображения, я предполагаю, что моя проблема связана с тепловой картой, нарисованной в части холста, которую я все еще не мог понять .Буду признателен за любую помощь

— 12.06.2018 08:23

11.06.2018 15:33

Ответ принят как подходящий

Я вижу, H337 не использует ваш холст. Вы предоставляете контейнер, и он создает холст в этом div.

var heatmapInstance = h337.create({
  container: document.getElementById('heatMap')
});

Если вы запустите свою страницу и просмотрите тепловую карту, вы увидите, что в этом div есть два элемента холста. Удалите свою и выберите тепловую карту по классам:

http://jsfiddle.net/79abc2sx/5/

Спасибо, я только что понял, что при проверке элементов и извлечении URI (URL) холста карта была создана путем доступа к дочернему элементу div, и это сработало!

— 12.06.2018 14:31

12.06.2018 10:40

Это мой полностью настроенный (с добавленным нечетким замечанием выше) и рабочий код для рисования тепловой карты JS на основе набора точек с их соответствующими значениями и загрузки этой карты как PNG, если кому-то нужен рабочий код.

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Heatmap Test Code</title>
<script src='http://www.patrick- 
wied.at/static/heatmapjs/assets/js/heatmap.min.js'></script>

<script>
function load(){
  renderCanvas();

  // add listener to the download button
  document.getElementById('download').addEventListener(
  'click',
  function() {download(this)},
  false
 );
}

// draw your heatmap here
function renderCanvas(){
 var heatmapInstance = h337.create({
    container: document.getElementById('heatMap')
  });

  var testData = {
        min: 0,
        max: 100,
        data: [{x: 807, y: 583, value: 500},{x: 770, y: 583, value: 500},{x: 
750, y: 583, value: 500},{x: 750, y: 583, value: 500},{x: 200, y: 583, 
value: 500},{x: 750, y: 583, value: 500}, {x: 597, y: 285, value: 51}, {x: 
217, y: 449, value: 73}, {x: 377, y: 656, value: 58}, {x: 467, y: 509, 
value: 47}, {x: 487, y: 164, value: 46}, {x: 247, y: 194, value: 35}]
  };
  heatmapInstance.setData(testData);
}

function download(link){

  link.href = 
(document.getElementById("heatMap").childNodes[1]).toDataURL();
//    console.info(document.getElementById("heatMap").childNodes[1]);
  link.download = 'image_name.png';
 }

</script>
</head>
<body onload = "load()">
  <div id = "heatMap" style = "height:740px" >
  </div>
  <a id = "download" href = "#">Download as image</a>

</body>
</html>

12.06.2018 14:34

Другие вопросы по теме

Панель начальной загрузки поверх изображения

Сохраняйте элементы управления видео через 3 секунды после наведения курсора

HTML + Javascript для чтения локальной файловой системы

Как удалить пустое пространство, созданное изображением?

Кодирование символа ascii в HTML

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

Как отключить текстовое поле и сохранить активную вставку

CSS-коды мешают работе с PHP

Выпадающее меню панели навигации не отображается

Bootstrap 4 scrollspy со списком-группой не работает

Загрузка холста тепловой карты JS (пустой холст, хотя отображается тепловая карта)

Ответы 3

Другие вопросы по теме

Похожие вопросы