一、简单使用

1、项目中引入html2canvas
//方式1： 直接script引入包
<script src="js/html2canvas.js"></script>
// 方式2： 通过npm安装并使用import引入
npm install html2canvas --save
import html2canvas from 'html2canvas'
2、基础使用 
<div id="container">
    需要截图的部分
<img id="imgId">
<script>
    html2canvas(document.getElementById("container"), {
        width: 200, // 根据需求进行配置截图的尺寸
        height: 200, // 根据需求进行配置截图的尺寸
        allowTaint: false,
        useCORS: true, //图片跨域
        dpi: 300,  //解决生产图片模糊
        backgroundColor: "#fff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
    }).then(canvas => {
        const src = canvas.toDataURL('image/png')
        document.getElementById('imgId').setAttribute('src', src)
</script>
二、遇到的问题
 
1、页面存在滚动条的情况下，截图不全的问题
 
2、截图区域存在动态跨域图片，导致这部分区域截图空白问题（图片跨域问题）
 
3、兼容iOS遇到的问题1：IOS8只支持-webkit-flex布局，不支持flex布局
 
4、兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调用失败
 
5、兼容iOS遇到的问题3：html2canvas截图后渲染在动态生成 img 标签无效
 
三、问题解决
 
1、解决页面存在滚动条的情况下，截图不全的问题（如果是截图内容多，一下子无法加载出来导致截图空白，可以适当使用延时器 setTimeout()） 
// 方式1：在截图之前，将页面的滚动条滚至顶部
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
html2canvas(document.getElementById("container"), {
    width: 200, // 根据需求进行配置截图的尺寸
    height: 200, // 根据需求进行配置截图的尺寸
    allowTaint: false,
    useCORS: true, //图片跨域
}).then(canvas => {
    const src = canvas.toDataURL('image/png')
    document.getElementById('imgId').setAttribute('src', src)
// 方式2：动态配置html2canvas的配置项：width、height、windowWidth、windowHeight、x、y (个人感觉这个比较难配置，需要一点一点得去调试配置)
html2canvas(document.getElementById("container"), {
    width: window.screen.availWidth - 35, // 根据需求进行配置截图的尺寸
    height: window.screen.availHeight - 276,  // 根据需求进行配置截图的尺寸
    windowWidth: document.body.scrollWidth - 50,
    windowHeight: document.body.scrollHeight,
    x: 0,
    y: window.pageYOffset + 40,
    allowTaint: false,
    useCORS: true, //图片跨域
}).then(canvas => {
    const src = canvas.toDataURL('image/png')
    document.getElementById('imgId').setAttribute('src', src)
2、解决截图区域存在动态跨域图片，导致这部分区域截图空白问题（图片跨域问题） 
// 方式1：
// step1： 在img元素中添加 crossOrigin="anonymous",使得跨域图片得请求header中会带上Origin属性，但不会带上cookie和客户端ssl证书等信息
<div id="container">
    需要截图的部分
    <img src="http://192.168.11.22/img/1111.png"  crossOrigin = "anonymous"/>
<img id="imgId">
// step1： 配置 allowTaint、useCORS
<script>
    html2canvas(document.getElementById("container"), {
        width: 200, // 根据需求进行配置截图的尺寸
        height: 200, // 根据需求进行配置截图的尺寸
        allowTaint: false, // 允许跨原始图像污染画布
        useCORS: true, //尝试使用CORS从服务器加载图像
    }).then(canvas => {
        const src = canvas.toDataURL('image/png')
        document.getElementById('imgId').setAttribute('src', src)
</script>
// step3：图片服务器配置 Access-Contorl-Allow-Origin: *
// 方式2：直接让后台将跨域图片转成base64传给前端，然后再进行html2canvas截图
3、解决兼容iOS遇到的问题1：IOS8只支持-webkit-flex布局，不支持flex布局 
// 方式1： 在需要截图的区域不使用flex布局
// 方式2： 改html2canvas的源码，让 flex和-webkit-flex都设置相同的样式（即：返回 DISPLAY.FLEX）
4、解决兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调用失败 
// step1: 移除 html2canvas 【npm uninstall html2canvas】
// step2： 项目的package.json 中的 html2canvas 版本降低为【1.0.0-rc.4】---  "html2canvas": "^1.0.0-rc.4"
// step3： 安装1.0.0-rc.4版本 【npm install --save html2canvas@1.0.0-rc.4】
5、兼容iOS遇到的问题3：html2canvas截图后渲染在动态生成 img 标签无效 
// 不动态生成 img 标签，只是修改器src属性 
<div id="container">
    需要截图的部分
<img id="imgId">
<script>
    html2canvas(document.getElementById("container"), {
        width: 200, // 根据需求进行配置截图的尺寸
        height: 200, // 根据需求进行配置截图的尺寸
        allowTaint: false,
        useCORS: true, //图片跨域
    }).then(canvas => {
        const src = canvas.toDataURL('image/png')
        document.getElementById('imgId').setAttribute('src', src)
</script>
1、兼容ios注意事项：
 ① 不使用 flex 布局
 ② 不动态生成 img 标签，只是修改器src属性
 ③ 一定要使用html2canvas 1.0.0-rc.4.js版本 (重点注意)
 ④ rc4版本不支持ssr，需要head的script引入或者动态导入：import (‘html2canvas’).then(({default: html2canvas}) => {})
 ⑤ rc4版本在iOS端不支持css:LinearGradient! 会直接报错进入catch 
2、如果截图内容过多，或者是弹框截图，加上setTimeout延时器会有效解决截图空白问题 
** 如果日后遇到其他问题，会在此文中继续加以补充**
function downLoadCanvasPicture(id,name,scale){
  var imgUri = "";
  var shareContent = document.getElementById(id);
  var width = shareContent.offs
图片显示不出来
就像大多数人说的一样，HTML中的图片产生了跨域，可以将网络图片转为base64后修改img 的src属性值，添加图片允许跨域的属性。调用html2canvas的API时，将跨域参数设置为true，允许跨域。
图片生成显示不全，只有半截或者空白
在有滚动的页面，产生了滚动条后，生成的图片可能会只有一半或者空白。答案只有一个，那就是要把html2canvas的配置项参数中，scrollx，scrolly都设置为0，问题就解决了。　　　　　oﾟ*｡o
                                    我正在编写一个脚本来处理图片并将其保存到图像中.我有一个div,我设置了一个背景图像,在那个div我有另一个div,我操作的图像(调整大小,旋转和拖动).一切都工作正常,我收到一个图像,调整大小和位置样式正确应用,只有旋转样式恢复到零度角,即水平.有没有解决方法？我的代码,                DownloadCSS：#canvas {float: left;width: 69%;hei...
        html2canvas(document.querySelector(".poster"), {
            allowTaint: true,
            useCORS: true /*使用跨域*/
        }).then(canvas => {
            let imageTofile = document.getElementByI
                                    Html2Canvas踩坑笔记简介优劣优势劣势常见问题IOS 13.4 之后无法使用问题滚动顶部空白问题图片跨域问题图片加载不全问题参考
Html2canvas主要是将Dom 节点转换成canvas工具库。利用canvas 转换为DataURL 的接口可以实现纯客户端的图片生成以及下载。适用场景主要是一些商品和活动之类的分享海报。
github 仓库
生成图片的过程在客户端，高并发的场景下减少服务器的压力。
方案简单开发成本低，
客户端的设备各式各样，各种浏览器内核，包