前端生成图片

<template>
    <div style="margin-top: 30px;">
      <button @click="doCut()"> 点击截图 </button>
      <div style="height: 350px" id="roc" ref="roc"></div>
    </div>
</template>

<script>
    import html2canvas from 'html2canvas'
    export default {
       methods: {
          doCut() {
            html2canvas(this.$refs.roc).then((canvas) => {
            const img = new Image()
            img.src = canvas.toDataURL('png')
            img.setAttribute('crossOrigin', 'anonymous')
            canvas.height = 500
            var context = canvas.getContext('2d')
            img.onload = function() {
              var w = img.width
              var h = img.height
              context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
              var imgUrl = canvas.toDataURL('image/png')
              console.log(imgUrl);
        }
      })
    }
  }

    }
</script>