OpenLayers 6 print map with scale to pdf via jsPDF

Question

I am using:

• angular 8V,
• Open Layers 6.4 V

I would like to save my OpenLayers map as PDF.

I am able to Print map smoothly using this example. OpenLayer Example.

input Form is: selection of pdfType(orientation, landscape), pdfSize(a4,a3...), DPI(75,150..)..

Requirements is:

1. Print Map only selected Polygon Area with scale of Polygon(scale should be top-left)
2. Print current map view with background but selected Polygon should have map content.

I have tried these codes before:

const orgExtent = map.getView().calculateExtent();
// I have image size
const polygonExtent = map.getView().calculateExtent(ImagesizeOnMap);
const polygon = fromExtent(extent);
 const feature = new Feature(polygon);
 const vectorSource = new VectorSource({
});
vectorSource.addFeatures([feature]);
 const vectorLayer = new VectorLayer({
 source: vectorSource,
});
vectorLayer.set('name', 'polygonPrint');
map.addLayer(vectorLayer);

// Here difficulty to find selected polygon scale(like 200mi).. tried with **control.element.innerText**
const orginalMapSize= map.getSize();
const viewResolution = map.getView().getResolution();
const size = ImagesizeOnMap;// polygon image size
const width = Math.round((pdfSize[0] * resolution) / 25.4);
const height = Math.round((pdfSize[1] * resolution) / 25.4);
map.once('rendercomplete', function() {  
mapCanvas.width = width;
mapCanvas.height = height;
const mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
 document.querySelectorAll('.ol-layer canvas'),
 function(canvas) {
  if (canvas.width > 0) {
    const opacity = canvas.parentNode.style.opacity;
    mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
    const transform = canvas.style.transform;
    const matrix = transform
    .match(/^matrix\(([^\(]*)\)$/)[1]
              .split(',')
              .map(Number);
    // Apply the transform to the export map context
    CanvasRenderingContext2D.prototype.setTransform.apply(
    mapContext,
    matrix
    );
    mapContext.drawImage(canvas, 0, 0);
   }
  }
 );
mapContext.globalAlpha = 1;
const pdf = new jsPDF(orientation, undefined, undefined);
pdf.addImage(
 mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, pdfSize[0], pdfSize[1]
);
...
... // From Above Example Link added same code

I have tried many solution but can't get the desired result.

Answer 1

gis s.e. has had declining activity for a long time for some reason.

There are almost 4800 openlayers related questions on https://stackoverflow.com/questions/tagged/openlayers that might offer more feedback.