Vue 插件 html2canvas 将页面内容生成图片

王泓

2023-12-01

官网：http://html2canvas.hertzen.com/

* 使用

1、安装：

npm install --save html2canvas

2、引入：

import html2canvas from "html2canvas"

3、将特定内容转成图片

　　特定内容包裹的 div 添加 ref 属性标记

<div class="container" ref="imageDom"></div>

/**
* 将页面指定节点内容转为图片 
*/
generatePicture() {
  html2canvas(this.$refs.imageDom).then(img => {
    // 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)
    this.imgUrl = img.toDataURL("image/png"); //可将 canvas 转为 base64 格式
  });
}

* 踩坑

***页面有些内容不能在生成的图片内显示

之所以能够生成图片，是因为将页面指定的内容 DOM元素转成了canvas，在转换的时候，并不是所有的css属性都支持，比如：box-shadow, text-overflow:ellipsis等。
因此，图片内容出现空白的时候，建议修改css表现样式。

canvas宽高设置，跨域设置

生成的canvas宽高大小，是否允许跨域图片等，读者可参考官方文档进行相应设置：

html2canvas(this.$refs.imageDom, {
  width: this.$refs.imageDom.clientWidth, //dom 原始宽度
  height: this.$refs.imageDom.clientHeight,
  allowTaint: true, //允许污染
  taintTest: true, //在渲染前测试图片
  // useCORS: true, //开启跨域配置，但和allowTaint不能共存
}.then(img => {});

背景默认为白色

生成的图片背景默认为白色，可以通过 backgroundColor 属性修改背景颜色，使用如下：

html2canvas(this.$refs.imageDom, {
  backgroundColor: null // null 表示设置背景为透明色
}.then(img => {});

canvas 绘制页面自动向下偏移

在不设置 scrollY 的情况下，canvas 绘制页面时会根据全局页面的滚动情况自动向下偏移：

html2canvas(this.$refs.imageDom, {
  scrollY: 0, 
  scrollX: 0,
}.then(img => {});

截图不全

网上好多说截图往下偏移也是因为没有设置 scrollY，scrollX 这两个属性的原因，实测有时并不能解决截图不全的问题
截图不全的问题：

原因一：

在点击保存图片时，此时要保存的资源较多，导致模块并没有完全加载完毕，就已经生成了截图。
解决方案：（延迟）

setTimeout(() => {
  html2canvas(this.$refs.imageDom).then(img => {});
}, 200);

原因二:

滚轮滑动造成的，主要是 html2canvas 是根据 body 进行截图，若内容高度高于 body 时，就会出现这样的问题
解决方案：(在生成截图前，先把滚动条置顶)

window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
html2canvas(this.$refs.imageDom).then(img => {});