带你领略 html2canvas

2020-11-19 14:12:56 浏览数 (1)

这个过程中如果碰到一些天坑，不用怕，小编我已经找到网上的一些解决方案了

html2canvas - 项目中遇到的那些坑点汇总(更新中...)

html2canvas库使用中出现的问题及解决方案

如何安装

使用 npm or yarn

代码语言：javascript复制
npm install html2canvas
yarn add html2canvas

导入

代码语言：javascript复制
import html2canvas from 'html2canvas'

用法

代码语言：javascript复制
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

所以一个基本的代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/html2cancas.js"></script>
  </head>
  <body></body>
  <script>
    html2canvas(document.body).then(function (canvas) {
      document.body.appendChild(canvas)
    })
  </script>
</html>

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

画布的宽度

height

Element height

“画布”的高度

x

Element x-offset

作物画布坐标

y

Element y-offset

作物画布坐标

scrollX

Element scrollX

渲染元素时使用的x轴位置(例如，如果元素使用“position: fixed”)

scrollY

Element scrollY

呈现元素时使用的y轴位置(例如，如果元素使用“position: fixed”)

windowWidth

`Window.innerWidth

当渲染“元素”时使用的窗口宽度，这可能会影响媒体查询等事情

windowHeight

Window.innerHeight

渲染“元素”时使用的窗口高度，这可能会影响媒体查询等事情

如果你希望排除某些元素被渲染，你可以添加data-html2canvas-ignore属性到这些元素，html2canvas将从渲染中排除它们。

下面是所有支持的CSS属性和值的列表。

  • background
    • url()
    • linear-gradient()
    • radial-gradient()
    • background-clip (Does not support text)
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-size
  • border
    • border-color
    • border-radius
    • border-style (Only supports solid)
    • border-width
  • bottom
  • box-sizing
  • content
  • color
  • display
  • flex
  • float
  • font
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
  • height
  • left
  • letter-spacing
  • line-break
  • list-style
    • list-style-image
    • list-style-position
    • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • overflow
  • overflow-wrap
  • padding
  • position
  • right
  • text-align
  • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style (Only supports solid)
  • text-shadow
  • text-transform
  • top
  • transform (Limited support)
  • visibility
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap
  • z-index

截图模糊的原因

原理就是讲canvas画布的width和height放大两倍。

后来学习canvas的时候，才了解到这种写法不同于css的宽高设置，

因为css里的只是展示画布显示的大小，不像这样是canvas真正的内里图画分辨率的大小。

代码语言：javascript复制
/*图片跨域及截图模糊处理*/
let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象
    width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
    height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
    canvas = document.createElement("canvas"), //创建一个canvas节点
    scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.clientWidth * scale   "px";
canvas.style.height = shareContent.clientHeight * scale   "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    logging: false, //日志开关，便于查看html2canvas的内部执行流程
    width: width, //dom 原始宽度
    height: height,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent,opts).then（）

*元素设置文字阴影，截图后阴影错乱，所有元素都会有阴影*

起初以为是v1.0.0-alpha.12 最新版本的问题,后来改成5也不行，把文字阴影去掉就可以了。

这个问题在大神的博文中有解决方案：https://blog.csdn.net/SDUST_JSJ/article/details/78122610

以下为针对本问题的部分摘录：

文本设置text-shadow截图后却没有文本阴影(2017-09-28)

bug原因

查看了源码，html2canvas确实处理了text-shadow，但是没有正确的处理小数，导致最后文本阴影没有显示出来。具体的代码为第1762行

代码语言：javascript复制
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)([^)] )(s-?d px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?d px)|(#. )|(rgb(. ))|(rgba(. ))/g;
解决方案

针对这两行的正则表达式，我添加了针对小数的判断，修改后的代码如下：

代码语言：javascript复制
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)([^)] )(s-?d (?:.d )?px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?d (?:.d )?px)|(#. )|(rgb(. ))|(rgba(. ))/g;

测试：

代码语言：javascript复制
// html2canvas正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)([^)] )(s-?d px){0,})/g); // ["rgb(102, 102, 102)"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?d px)|(#. )|(rgb(. ))|(rgba(. ))/g); // ["rgb(102, 102, 102)", "924px", "924px", "0px"]
 
// 修改后的正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)([^)] )(s-?d (?:.d )?px){0,})/g); // ["rgb(102, 102, 102) 11.924px 11.924px 0px"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?d (?:.d )?px)|(#. )|(rgb(. ))|(rgba(. ))/g); // ["rgb(102, 102, 102)", "11.924px", "11.924px", "0px"]
html 渲染 canvas css

0 人点赞