JS 热图 canvas 下载（显示热图时为空 canvas）

Question

我想下载使用我自己的点的 setData 创建的生成的 JS 热图。正在显示热图，但是当我下载 canvas 时，我得到一张空白图片。

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

Answer 1

大功告成，设置Href为图片，触发下载：

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

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

Answer 2

我明白了，H337 没有使用您的 canvas。您正在提供容器，它正在 div.

中创建一个 canvas

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

如果您运行您的页面并检查热图，您会看到 div 中有两个 canvas 元素。通过 class:

删除你的和 select 热图

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

Answer 3

这是我完全调整过的（上面添加了 offwhite 注释）和工作代码，用于根据一组点及其各自的值绘制 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.log(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>

JS 热图 canvas 下载（显示热图时为空 canvas）

JS heatmap canvas download (empty canvas though heat map is displaying)

html

javascript

canvas

heatmap