html2canvas使用文档

安装

npm install html2canvas
or
yarn add html2canvas

引入

import html2canvas from 'html2canvas'

使用

<div ref="canvasDom">
  <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()
          })
      })

配置项

名称	默认值	描述
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>