Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.
使用heatmap.js生成热力图时,报了这个错。
原因是canvas容器需要高度,给div容器设置高度就可以了。
<template>
<div id="heatmap"></div>
</template>
改为
<template>
<div id="heatmap" style="width:840px; height: 400px;"></div>
</template>
附上使用vue生成一个热力图demo
<template>
<div id="heatmap" style="width:840px; height: 400px;"></div>
</template>
<script>
import Heatmap from 'heatmap.js'
export default {
name: '',
components: {},
props: {},
data () {
return {
};
},
computed: {},
watch: {},
created () { },
mounted () {
this.getRectValue()
this.initHotPic()
},
methods: {
// 初始化获取宽高(考虑到后期的适配,获取父级元素的宽高)
getRectValue () {
this.cavWidth = document.getElementById("heatmap").clientWidth;
this.cavHeight = document.getElementById("heatmap").clientHeight;
console.log(this.cavWidth, this.cavHeight)
},
// 初始化热力图
initHotPic () {
var heatmap = Heatmap.create({
container: document.getElementById('heatmap')
});
var len = 100;
const width = 300;
const height = 300;
const points = [];
var max = 0;
while (len--) {
var val = Math.floor(Math.random() * 100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
value: val
};
points.push(point);
}
heatmap.setData({
max: max,
data: points
});
}
}
};
</script>
<style scoped></style>