Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘: The source height is 0.

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>