html2canvas截取不到openlayer地图（底图和注记等切片服务图层）解决方案

第一步：设置所有切片图层服务的source对象，添加属性 crossOrigin: "anonymous",   //允许跨域

 

 

 第二步：设置html2canvas配置项：

 

 

 

最后，附上html2canvas相关方法代码

// 调用
let mapImg = await this.toImage('map', this.uuid());

// 方法体
// 开始截图
            toImage(elementId, imgName) {
                //console.log(elementId)
                // 手动创建一个 canvas 标签
                const canvas = document.createElement('canvas');
                // 获取父标签，意思是这个标签内的 DOM 元素生成图片
                // lessonTableImg是给截图范围内的父级元素自定义的ref名称
                const canvasBox = document.getElementById(elementId);
                // 获取父级的宽高
                const width = parseInt(window.getComputedStyle(canvasBox).width);
                const height = parseInt(window.getComputedStyle(canvasBox).height);
                // 宽高 * 1 并放大 1 倍 是为了防止图片模糊
                canvas.width = width * 1;
                canvas.height = height * 1;
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';
                const context = canvas.getContext('2d');
                context.scale(1, 1);
                const options = {
                    backgroundColor: '#061b48', // 设置canvas背景图颜色 防止有些图片透明
                    canvas: canvas,
                    useCORS: true,
                };
                return html2canvas(canvasBox, options).then(async (canvas) => {
                    // toDataURL 图片格式转成 base64
                    const dataURL = canvas.toDataURL('image/png');
                    // 调用下载
                    // this.downloadImage(dataURL);
                    // 转为file文件
                    const file = this.dataURLtoFile(dataURL, imgName);
                    return file;
                });
            },
            // 下载图片 传入base64
            downloadImage(url) {
                // 如果是在网页中可以直接创建一个 a 标签直接下载
                const a = document.createElement('a');
                a.href = url;
                a.download = '首页截图';
                a.click();
            },
            // base64转file方法
            dataURLtoFile: function (dataurl, filename) {
                const arr = dataurl.split(',')
                const mime = arr[0].match(/:(.*?);/)[1]
                const bstr = atob(arr[1])
                let n = bstr.length
                const u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename + '.png', { type: mime });
            },
            // 获取uuid
            uuid() {
                const s = [];
                const hexDigits = '0123456789abcdef';
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = '-';

                const uuid = s.join('');
                return uuid;
            }