html2canvas 使用总结

2021-04-09 本文已影响0人示十

话不多说，在实际项目中生成截图是很常见的需求，而一般的，我们都会选择使用js库来自动生成（从头造轮子太难了...），比如今天的主角：html2canvas

使用

先来看下如何在 vue 项目中应用的

import html2canvas from "html2canvas";

// 生成快照
const convertToImage = (container, options = {}) => {
  // 设置放大倍数
  const scale = window.devicePixelRatio;

  // 传入节点原始宽高
  const _width = container.offsetWidth;
  const _height = container.offsetHeight;

  let { width, height } = options;
  width = width || _width;
  height = height || _height;

  // html2canvas配置项
  const ops = {
    scale,
    // width,
    // height,
    useCORS: true,
    allowTaint: false,
    ...options
  };
  
  return html2canvas(container, ops).then(canvas => {
    // 返回图片的二进制数据
    return canvas.toDataURL("image/png");
  });
}

// 调用函数，取到截图的二进制数据，对图片进行处理（保存本地、展示等）
const imgBlobData = await convertToImage(element);

仅此而已~~~

遇到的问题

如果只是这样就结束了，那这也太简单了吧，但是人无完人，再美的东西也会有瑕疵，下面列举一些 html2canvas 的问题及解决办法

1、图片跨域

解决方案：

设置配置项 allowTaint: false

canvas 的 CanvasRenderingContext2D 属于浏览器的对象，如果渲染过跨域资源，浏览器就认定 canvas 已经被污染了 Taint：污点
设置配置项 useCORS: false

表示允许跨域资源共享，注意不能与 allowTaint 同时配置为 true
img 标签中添加 crossOrigin = "anonymous"

anonymous：如果使用这个值的话就会在请求 header 中带上 Origin 属性，但请求不会带上 cookie 和客户端 ssl 证书等其他的一些认证信息
图片服务器配置 Access-Control-Allow-Origin: *

重要的配置项，是跨域问题的根本源泉，需要后端配合

2、截图锯齿

解决方案：根据设备像素比进行缩放

// 设置放大倍数
const scale = window.devicePixelRatio;

3、截图不全

解决方案：截图之前将页面滚动到顶部

document.body.scrollTop = document.documentElement.scrollTop = 0;
const imgBlobData = await convertToImage(element);

4、对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

解决方案：

对于一些必要的样式，可以选择使用图片做兜底实现

box-shadow 可以参考这个pr，修改源码解决，但是，实际效果也不是太理想……

5、svg 标签

问题原因：vue-lottie 动画库渲染的标签是 svg(也可能是你自己写的 svg 标签)

html2canvas 对于 svg 标签的支持也不尽人意，解决办法同样是用图片做兜底

在项目中，我们是用 svg 做动画，截图的时候把动画换成一张静态图，这样只要设置要静态图的样式，截图效果还是可以接受的

6、其他

建议：在页面开发前尽量跟产品确认好这个页面到底要不要截图，如果需要截图，那么搬砖的时候就要注意不要使用以上 css3 特性了，否则，就后期就只能含着眼泪、咬着牙修 bug 了

不要问我是怎么知道的~~~

html2canvas 使用总结

使用

遇到的问题

猜你喜欢

热点阅读