html2canvas使用文档

安装

npm install html2canvas
or
yarn add html2canvas

引入

import html2canvas from 'html2canvas'

使用

<div ref="canvasDom">
  <div ref="businessCard">这是需要生成图片的内容</div>
  <h4>Hello world!</h4>
</div>

const canvasDom = this.$refs.canvasDom
this.$toast.loading('生成中...')
html2canvas(canvasDom, {
          dpi: 300, // 解决生产图片模糊
          useCORS: true,
          allowTaint: false,
          logging: false,
          scale: 2,
          windowHeight: this.$refs.businessCard.$el.offsetHeight + 40
        })
          .then((canvas) => {
            this.canvasImg = canvas.toDataURL('image/png')
            this.$toast.clear()
            this.$refs.businessCardShare.open(this.canvasImg)
          })
          .catch(() => {
            this.$toast.clear()
          })
      })

其中windowHeight可以控制生成canvas的高度。默认是Window.innerHeight

配置项

名称						默认值						描述
allowTaint					false						是否允许跨源图像污染画布
backgroundColor				#ffffff						画布背景色（如果在DOM中未指定），为透明设置null
canvas						null						用作绘图基础的现有画布元素
foreignObjectRendering		false						如果浏览器支持ForeignObject渲染，是否使用它
imageTimeout				15000						加载图像超时（毫秒），设置为0可禁用超时
logging						true						为调试目的启用日志记录
proxy						null						用于加载跨源图像的代理的Url。如果留空，则不会加载跨原点图像。
removeContainer				true						是否清除html2canvas临时创建的克隆DOM元素
scale						window.devicePixelRatio		用于渲染的比例。默认为浏览器设备像素比率。
useCORS						false						是否尝试使用CORS从服务器加载图像
width						Element width				画布的宽度
height						Element height				画布的高度
x							Element x-offset			裁剪画布x坐标
y							Element y-offset			裁剪画布y坐标
scrollX						Element scrollX				渲染元素时要使用的x滚动位置（例如，如果元素使用位置：fixed）
scrollY						Element scrollY				渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed）
windowWidth					Window.innerWidth			渲染Element时使用的窗口宽度，这可能会影响Media查询等内容
windowHeight				Window.innerHeight			渲染Element时使用的窗口高度，这可能会影响Media查询等内容

如何忽略某部分内容

可以设置data-html2canvas-ignore="true"忽略某些元素

<div class="btns" data-html2canvas-ignore="true">需要忽略的元素</div>