首页 > 解决方案 > 使用 html2canvas 获取谷歌地图矢量截图

问题描述

我正在尝试使用谷歌地图矢量获取 div 的屏幕截图。使用地图类型栅格尝试相同的工作。但我需要用谷歌地图矢量v=beta来做到这一点

使用选项 useCors: true 地图保持空白。

标记出现

我的代码:

    html2canvas(document.querySelector("#map-area"),{useCORS: true,allowTaint:true}).then(function(canvas) {
    
                    imgData = canvas.toDataURL('image/jpg');

                    doc.addImage(imgData,'JPEG', 0, 0, 1790, 1260,'','FAST');
    
                    doc.save('map.pdf');
    
                });

谢谢

标签: vectormapshtml2canvas

解决方案


在一切正常之前添加这个:

HTMLCanvasElement.prototype.getContext = function(origFn) {
    return function(type, attribs) {
    attribs = attribs || {};
    attribs.preserveDrawingBuffer = true;
    return origFn.call(this, type, attribs);
    };
}(HTMLCanvasElement.prototype.getContext);

推荐阅读