html2canvs的一些问题

let html2canvas = null;

export default {
  beforeMount() {
    import('html2canvas').then((plugin) => {
      html2canvas = plugin.default;
    });
  },
  methods: {
    // 获取分享图片 base64
    getShareImgBase64() {
      return new Promise((resolve) => {
        setTimeout(() => {
          // #capture 就是我们要获取截图对应的 DOM 元素选择器
          html2canvas(document.querySelector('#capture'), {
            useCORS: true, // 【重要】开启跨域配置
            scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
            allowTaint: true, // 允许跨域图片
          }).then((canvas) => {
            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            resolve(imgData);
          });
        }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
      });
    },
  },
};

1. html2canvas(element: HTMLElement, options: object): Promise<HTMLCanvasElement>

options对象可选的值如下：

Name	Default	Description
allowTaint	false	是否允许跨域图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中没有指定，设置“null”（透明）
canvas	null	使用现有的“画布”元素，用来作为绘图的基础
foreignObjectRendering	false	是否使用ForeignObject渲染（如果浏览器支持的话）
imageTimeout	15000	加载图像的超时时间(毫秒)，设置为“0”以禁用超时
ignoreElements	(element) => false	从呈现中移除匹配元素
logging	true	为调试目的启用日志记录
onclone	null	回调函数，当文档被克隆以呈现时调用，可以用来修改将要呈现的内容，而不影响原始源文档。
proxy	null	用来加载跨域图片的代理URL，如果设置为空（默认），跨域图片将不会被加载
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的缩放比例，默认为浏览器设备像素比
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	canvas的宽度
height	Element height	canvas的高度
x	Element x-offset	canvas的x轴位置
y	Element y-offset	canvas的y轴位置
scrollX	Element scrollX	渲染元素时使用的x轴位置(例如，如果元素使用position: fixed)
scrollY	Element scrollY	渲染元素时使用的y轴位置(例如，如果元素使用position: fixed)
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响诸如媒体查询之类的事情
windowHeight	Window.innerHeight	渲染元素时使用的窗口高度，这可能会影响诸如媒体查询之类的事情

忽略元素

options有一个ignoreElements参数可以用来忽略某些元素，从渲染过程中移除，除了设置该参数外，还有一种忽略元素的方法，就是在需要忽略的元素上增加data-html2canvas-ignore属性。

跨域的问题

对于允许跨域的图片我们可以在 Headers 里面看到

Access-Control-Allow-Origin:*

对于这个问题，最简单的解决方案就是直接在所在图片的 img 标签里面加上 crossOrigin = "anonymous"，即：

<img crossorigin="anonymous" src="xxx" >

在某些情况下如果你发现加上 crossOrigin = "anonymous" 之后，图片显示不出来了，此时给图片的 url 中拼上一个随机字符串即可。

<img crossorigin="anonymous" :src="`xxx?_=${Date.now()}`" >

当然，想要永久的解决这个问题需要后端同学配合在图片服务器上设置 图片服务器配置 Access-Control-Allow-Origin: *。

html2canvs官方文档

Options | html2canvas