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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <script src="./node_modules/html2canvas/dist/html2canvas.js">script>
    9.     <script type="text/javascript"
    10.         src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的百度地图key">script>
    11.     <title>屏幕截图title>
    12. head>
    13.  
    14. <body>
    15.     <div id="allmap" style="width: 100%;height: 500px;">
    16.  
    17.     div>
    18.     <div id="capture" style="padding: 10px; background: #f5da55">
    19.         <h4 style="color: #000; ">Hello world!h4>
    20.     div>
    21.     <button id="btnClick" onclick="btnClick()"
    22.         style="width: 80px;height: 30px;border-radius: 3px;border: none;margin-top: 20px;background-color: #43e83e;color: #fff;cursor: pointer;">截图button>
    23. body>
    24.  
    25. html>
    26. <script>
    27.  
    28.         // 按住鼠标右键，修改倾斜角和角度
    29.         var map = new BMapGL.Map("allmap");    // 创建Map实例
    30.         map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    31.         map.enableScrollWheelZoom(true);
    32.  
    33.         //解决百度地图截图后空白问题
    34.         HTMLCanvasElement.prototype.getContext = function (origFn) {
    35.             return function (type, attributes) {
    36.                 if (type === 'webgl') {
    37.                     attributes = Object.assign({}, attributes, {
    38.                         preserveDrawingBuffer: true,
    39.                     });
    40.                 }
    41.                 return origFn.call(this, type, attributes);
    42.             };
    43.         }(HTMLCanvasElement.prototype.getContext);
    44.  
    45.         var btnClick = () => {
    46.             html2canvas(document.querySelector("#allmap")).then(canvas => {
    47.                 document.body.appendChild(canvas)
    48.                 downLoad(saveAsPNG(canvas));
    49.             });
    50.         }
    51.  
    52.         // 保存成png格式的图片
    53.         var saveAsPNG = (canvas) => {
    54.             return canvas.toDataURL("image/png");
    55.         }
    56.  
    57.         // 保存成jpg格式的图片
    58.         var saveAsJPG = (canvas) => {
    59.             return canvas.toDataURL("image/jpeg");
    60.         }
    61.  
    62.         // 下载文件
    63.         var downLoad = (url) => {
    64.             var oA = document.createElement("a");
    65.             oA.download = '';// 设置下载的文件名，默认是'下载'
    66.             oA.href = url;
    67.             document.body.appendChild(oA);
    68.             oA.click();
    69.             oA.remove(); // 下载之后把创建的元素删除
    70.         }
    71.  
    72.  
    73. script>

    图片截图时空白处理方法

    1. 给img标签加上crossOrigin="anonymous"属性
    2.  
    3. 然后
    4.  
    5. 服务端开启跨域response.setHeader("Access-Control-Allow-Origin","*");
    6.  
    7. 并且开启CORS（重要）
    8.  
    9. 前端等图片加载完后再截图（重要）
    10.  
    11. useCORS记得开起来，很重要！！！
    12.  
    13. html2canvas(document.body,{
    14. 		useCORS: true,
    15. 	}).then(canvas => {
    16. 		// document.body.appendChild(canvas)
    17. 		downLoad(saveAsPNG(canvas));
    18. 	});

  • 相关阅读:
    运筹说 第72期 | 算法介绍之动态规划（二）
    实验（四）：指令部件实验
    Ubuntu系统anaconda安装初始化和env环境切换
    场景之分页查询设计
    毕业设计 STM32远程车锁控制系统 -物联网 单片机
    Python leetcode468：验证ip地址，解法
    AIGC|数字时代巨变，创新潮流涌现，万亿市值风口已开！
    Python包：包的概念、2种建立包方式、包的使用（代码 + 图文）
    前端菜鸟浅谈Web前端开发技术
    2022前端面试题上岸手册-Vue部分
  • 原文地址：https://blog.csdn.net/qq_35017350/article/details/128199354