jsPdf导出openlayers截图

问题

1.  ol生成图片遇到脏污染无法截图
2.  ol指定范围指定Zoom下显示的宽高问题
3.  jspdf中文乱码问题

1. 脏污染属于浏览器的安全机制，canvas内引入了其他跨域文件，在调用toDataUrl、toBold、getImageData 触发检查。启用了 CORS 的图片 - HTML（超文本标记语言） | MDN

引入外部图层在wms,wmts增加属性允许跨域

2.自动生成宽高参考

getSizeForExtent(extent, zoom) {
    const resolution = this.getZoomForResolution(zoom)
    const width = getWidth(extent) /resolution;
    const height = getHeight(extent) / resolution
    return [width,height];
}

const size = getSizeForExtent(extent,zoom);

map.setSize(size);

//所有图片加载完成
map.once('postcompose', (evt) => {
    const canvas = event.context.canvas
    const pageData = canvas.toDataURL('image/jpeg', 0.8);
    ...
});
map.fit(extent,
 {
   callback: () => {
    this.map.renderSync();
   },
 
                    constrainResolution: false,
                    earest: true
})

3. jspdf导出表格中文乱码

        字体路径放到public

        doc.addFont("/fonts/simhei.ttf", "simhei", "normal");

        doc.setFont("simhei", "normal");