Discussion :

[erichissime]

bonjour
un fichier index.html qui tourne dans un mini serveur en localhost
j'ai donc une map en openlayers avec différentes couches wmts et vector,
et j'essaie de l'exporter sans succès en png ou jpg ou en pdf.
j'ai vu les exemple et ça ne fonctionne pas.
par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 var exportPNGElement = document.getElementById('export-png');
exportPNGElement.addEventListener('click', function(e) {
    map.once('postcompose', function(event) {
      var canvas = event.context.canvas.toDataURL('image/png');
    });
    map.renderSync();
  }, false);

et la console me dit :

(index):367 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at G.<anonymous> (http://localhost:2035/:367:38)
at G.b (http://localhost:2035/v4.0.1/build/ol.js:41:394)
at G.Dc.b (http://localhost:2035/v4.0.1/build/ol.js:44:213)
at di (http://localhost:2035/v4.0.1/build/ol.js:171:223)
at ci.vg (http://localhost:2035/v4.0.1/build/ol.js:172:470)
at G.k.hp (http://localhost:2035/v4.0.1/build/ol.js:290:155)
at G.<anonymous> (http://localhost:2035/v4.0.1/build/ol.js:276:292)
at G.k.ip (http://localhost:2035/v4.0.1/build/ol.js:287:462)
at HTMLButtonElement.<anonymous> (http://localhost:2035/:369:9)


que faire svp ?

[IGNC_XT]

Cet exemple permet de répondre à l'export en PDF en intégrant les données vecteurs : http://openlayers.org/en/latest/exam...xport-pdf.html

[erichissime]

j'avais déjà vu cet exemple et l'avais décliné car il ne me convient pas :
il n'exporte pas la vue à la taille où on la voit.
cette histoire de résolution ne fonctionne pas car jspdf ne gère pas la résolution.
c'est juste un artifice qui ne change rien à la résolution :
test fait sur les 3 "résolutions"à agrandissement égal la qualité de l'image est égale, soit la résolution de l'écran.
Cet exemple ne fonctionne pas en local non plus
même erreur que précédemment
console

(index):127 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at http://localhost:2040/:127:33


​

[IGNC_XT]

L'autre solution, souvent utilisée dans pour les précédents dev en openlayers est l'utilisation de phantomJs et comme vous avez la main sur votre serveur (puisqu'en localhost), c'est parfait.

Le billet est vieux mais toujours d'actualité : https://blog.atolcd.com/index.php/20...-web-la-suite/

[erichissime]

j'avais déjà vu des exemples de phantomjs
je regarderai ça demain
merci

[erichissime]

bonsoir
en fait je n'y arrive pas
si je comprends bien Phantomjs est une sorte de console à laquelle on passe des commandes.
mais comment passe-t-on ces commandes depuis un javascript dans la page index.html ?
pour voir j'ai essayé la commande suivante depuis la console de windows :
.\essai\phantomjs-2.1.1-windows\bin\phantomjs.exe .\essai\phantomjs-2.1.1-windows\examples\rasterize_element.js http://localhost:2043 map.png '#map'
eh bien cela met un certain temps pour charger la page puis affiche une erreur :

Loading page...
Getting element clipRect...
SyntaxError: DOM Exception 12: An invalid or illegal string was specified.

undefined:2 in querySelector
:2
:4
TypeError: null is not an object (evaluating 'clipRect.top')

phantomjs://code/rasterize_element.js:35

alors je suis un peu désespéré pour un simple export