[vue] 导出图片

npm install --save html2canvas

import html2canvas from "html2canvas"

create_image() {
      let shareContent = this.$refs.capture //需要截图的包裹的（原生的）DOM 对象
      let canvas = document.createElement('canvas') //创建一个canvas节点
      let scale = 1 //当前节点的1倍像素
      // let scale = 1.5 //当前节点的1.5倍像素
      // let scale = window.devicePixelRatio //视网膜屏幕，设备像素比，好的显示器是2，普通显示器的是1。
      canvas.width = shareContent.offsetWidth * scale //获取dom 宽度* 定义canvas 宽度 * 缩放
      canvas.height = shareContent.offsetHeight * scale //获取dom 高度*定义canvas高度 *缩放
      canvas.getContext('2d').scale(scale, scale) //获取context,设置scale
      html2canvas(shareContent, {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
      }).then((canvas) => {
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement('a')
            eleLink.download = `《导出的名字》.png`
            eleLink.style.display = 'none'
            eleLink.href = URL.createObjectURL(blob)
            document.body.appendChild(eleLink)
            eleLink.click()
            document.body.removeChild(eleLink)
          },
          'image/png',
          1
        )
      })
    },

参考：

​​vue 导出图片​​