Skip to content

Commit

Permalink
fix(print): graphic scale + attribution in print pdf (#832)
Browse files Browse the repository at this point in the history
* fix(print): subtitle newline image format fix

* fix(print): graphic_scale+attributions-printpdf

* fix(print): correction erreur

* fix pour le probleme de desynchro

* Update map.ts

* Update print.component.ts

Co-authored-by: Marc-André Barbeau <[email protected]>
  • Loading branch information
alexisboyergauthier-msp and mbarbeau authored Apr 23, 2021
1 parent c173e36 commit 82ff8b5
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 11 deletions.
5 changes: 3 additions & 2 deletions demo/src/app/geo/print/print.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export class AppPrintComponent {
public map = new IgoMap({
controls: {
attribution: {
collapsed: true
collapsed: false
}
}
});
Expand All @@ -35,7 +35,8 @@ export class AppPrintComponent {
layer: 'carte_gouv_qc_ro',
matrixSet: 'EPSG_3857',
version: '1.3.0',
crossOrigin: 'anonymous'
crossOrigin: 'anonymous',
attributions: "© <a href='http://www.droitauteur.gouv.qc.ca/copyright.php' target='_blank'><img src='https://geoegl.msp.gouv.qc.ca/gouvouvert/public/images/quebec/gouv_qc_logo.png' width='64' height='14'>Gouvernement du Québec</a> / <a href='https://www.igouverte.org/' target='_blank'>IGO2</a>"
}
})
.subscribe(l => this.map.addLayer(l));
Expand Down
58 changes: 49 additions & 9 deletions packages/geo/src/lib/print/shared/print.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export class PrintService {
this.addMap(doc, map, resolution, size, margins).subscribe(
async (status: SubjectStatus) => {
if (status === SubjectStatus.Done) {
await this.addScale(doc, map, margins);
if (options.showLegend === true) {
await this.addLegend(doc, map, margins, resolution);
} else {
Expand Down Expand Up @@ -396,6 +397,49 @@ export class PrintService {
}
}

/**
* Add scale and attributions on the map on the document
* @param doc - Pdf document where legend will be added
* @param map - Map of the app
* @param margins - Page margins
*/
private async addScale(
doc: jsPDF,
map: IgoMap,
margins: Array<number>
) {
const mapSize = map.ol.getSize();
const extent = map.ol.getView().calculateExtent(mapSize);
// Get the scale and attribution
// we use cloneNode to modify the nodes to print without modifying it on the page, using deep:true to get children
let canvasOverlayHTML;
const mapOverlayHTML = map.ol.getOverlayContainerStopEvent();
// Remove the UI buttons from the nodes
const OverlayHTMLButton = mapOverlayHTML.getElementsByTagName('button');
for (const but of OverlayHTMLButton) {
but.setAttribute('data-html2canvas-ignore', 'true');
}
// Change the styles of hyperlink in the printed version
// Transform the Overlay into a canvas
// scale is necessary to make it in google chrome
// background as null because otherwise it is white and cover the map
// allowtaint is to allow rendering images in the attributions
// useCORS: true pour permettre de renderer les images (ne marche pas en local)
const canvas = await html2canvas(mapOverlayHTML, {
scale: 1,
backgroundColor: null,
allowTaint: true,
useCORS: true,
}).then( e => {
canvasOverlayHTML = e;
});
this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions
}

defineNbFileToProcess(nbFileToProcess) {
this.nbFileToProcess = nbFileToProcess;
}

private timeout(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
Expand All @@ -406,8 +450,9 @@ export class PrintService {
margins: Array<number>
) {
let image;

image = canvas.toDataURL('image/png');
if (canvas) {
image = canvas.toDataURL('image/png');
}

if (image !== undefined) {
const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
Expand Down Expand Up @@ -440,10 +485,9 @@ export class PrintService {
const heightPixels = Math.round((size[1] * resolution) / 25.4);

let timeout;

map.ol.once('rendercomplete', (event: any) => {
const canvases = event.target
.getViewport()
.getElementsByTagName('canvas');
const canvases = event.target.getViewport().getElementsByTagName('canvas');
const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => {
clearTimeout(timeout);

Expand Down Expand Up @@ -510,10 +554,6 @@ export class PrintService {
return status$;
}

defineNbFileToProcess(nbFileToProcess) {
this.nbFileToProcess = nbFileToProcess;
}

/**
* Download an image of the map with addition of informations
* @param map - Map of the app
Expand Down

0 comments on commit 82ff8b5

Please sign in to comment.