Fatal编程技术网
  • javascript/
  • Javascript JS热图画布下载（尽管热图正在显示，但画布是空的）

Javascript JS热图画布下载（尽管热图正在显示，但画布是空的）

javascript html canvas

Javascript JS热图画布下载（尽管热图正在显示，但画布是空的）,javascript,html,canvas,heatmap,Javascript,Html,Canvas,Heatmap,我想下载使用我自己点的设置数据创建的JS热图。热图正在显示，但当我下载画布时，得到的是一张空图片 <!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

我想下载使用我自己点的设置数据创建的JS热图。热图正在显示，但当我下载画布时，得到的是一张空图片

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


热图测试代码
下载
var heatmapInstance=h337.create({
容器：document.getElementById（'heatMap'）
});
var testData={
分:0,，
最高：100，
数据：[{x:807，y:583，值：500}，{x:770，y:583，值：500}，{x:
750，y:583，value:500}，{x:750，y:583，value:500}，{x:200，y:583，
值：500}，{x:750，y:583，值：500}，{x:597，y:285，值：51}，{x:
217，y:449，value:73}，{x:377，y:656，value:58}，{x:467，y:509，
数值：47}，{x:487，y:164，数值：46}，{x:247，y:194，数值：35}]
};
heatmaInstance.setData（testData）；
函数下载（）{
var download=document.getElementById（“下载”）；
变量图像=
document.getElementById（“myCanvas”）.toDataURL（“image/png”）
.replace（“图像/png”、“图像/octet流”）；
下载.setAttribute（“href”，图像）；
}
当您关闭时，将Href设置为图像，然后触发下载：

link.href = document.getElementById("myCanvas").toDataURL();
link.download = 'image_name.png';
我明白了，H337没有使用你的画布。您正在提供容器，它正在该div中创建画布

var heatmapInstance = h337.create({
  container: document.getElementById('heatMap')
});
如果您运行页面并检查热图，您将看到该分区中有两个画布元素。删除您的元素并按类选择热图：

这是我的完整调整（上面添加了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>


热图测试代码
函数加载（）{
renderCanvas（）；
//将侦听器添加到下载按钮
document.getElementById（'download'）.addEventListener(
“点击”，
函数（）{download（this）}，
假的
);
}
//在这里画你的热图
函数renderCanvas（）{
var heatmapInstance=h337.create({
容器：document.getElementById（'heatMap'）
});
var testData={
分:0,，
最高：100，
数据：[{x:807，y:583，值：500}，{x:770，y:583，值：500}，{x:
750，y:583，value:500}，{x:750，y:583，value:500}，{x:200，y:583，
值：500}，{x:750，y:583，值：500}，{x:597，y:285，值：51}，{x:
217，y:449，value:73}，{x:377，y:656，value:58}，{x:467，y:509，
数值：47}，{x:487，y:164，数值：46}，{x:247，y:194，数值：35}]
};
heatmaInstance.setData（testData）；
}
功能下载（链接）{
link.href=
（document.getElementById（“heatMap”）.childNodes[1]）.toDataURL（）；
//log（document.getElementById（“heatMap”）.childNodes[1]）；
link.download='image_name.png'；
}
感谢您提供了正确的下载方法。我用普通的简单画布进行了尝试，效果不错，但我的问题是它仍然下载空图片，我猜我的问题是在画布部分绘制的热图，我仍然想不出来。我希望能得到任何帮助。谢谢你，我刚刚意识到，在检查元素并提取画布的URI（URL）时，通过访问div的子级创建的地图成功了！