使用html2canvas 进行屏幕截图（附带解决截百度地图时空白问题）

本文链接：https://blog.csdn.net/qq_35017350/article/details/128199354

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/html2canvas/dist/html2canvas.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的百度地图key"></script>
    <title>屏幕截图</title>
</head>

<body>
    <div id="allmap" style="width: 100%;height: 500px;">

    </div>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>
    <button id="btnClick" onclick="btnClick()"
        style="width: 80px;height: 30px;border-radius: 3px;border: none;margin-top: 20px;background-color: #43e83e;color: #fff;cursor: pointer;">截图</button>
</body>

</html>
<script>

        // 按住鼠标右键，修改倾斜角和角度
        var map = new BMapGL.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);

        //解决百度地图截图后空白问题
        HTMLCanvasElement.prototype.getContext = function (origFn) {
            return function (type, attributes) {
                if (type === 'webgl') {
                    attributes = Object.assign({}, attributes, {
                        preserveDrawingBuffer: true,
                    });
                }
                return origFn.call(this, type, attributes);
            };
        }(HTMLCanvasElement.prototype.getContext);

        var btnClick = () => {
            html2canvas(document.querySelector("#allmap")).then(canvas => {
                document.body.appendChild(canvas)
                downLoad(saveAsPNG(canvas));
            });
        }

        // 保存成png格式的图片
        var saveAsPNG = (canvas) => {
            return canvas.toDataURL("image/png");
        }

        // 保存成jpg格式的图片
        var saveAsJPG = (canvas) => {
            return canvas.toDataURL("image/jpeg");
        }

        // 下载文件
        var downLoad = (url) => {
            var oA = document.createElement("a");
            oA.download = '';// 设置下载的文件名，默认是'下载'
            oA.href = url;
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除
        }


</script>

图片截图时空白处理方法

给img标签加上crossOrigin="anonymous"属性

然后

服务端开启跨域response.setHeader("Access-Control-Allow-Origin","*");

并且开启CORS（重要）

前端等图片加载完后再截图（重要）

useCORS记得开起来，很重要！！！

html2canvas(document.body,{
		useCORS: true,
	}).then(canvas => {
		// document.body.appendChild(canvas)
		downLoad(saveAsPNG(canvas));
	});