Wie exportiert man Bilder von einer Karte und fügt sie in eine neue PDF-Datei ein?

Question

Ich habe eine Webseite, wo ich eine Karte anzeigen mit openstreetmap der ol3 Bibliothek und andere Elemente aus primefaces:

<?xml version="1.0" encoding="UTF-8"?> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:p="http://primefaces.org/ui"> 
    <ui:define name="title"></ui:define> 
    <ui:define name="content" style="border-style: none;"> 
    <script type="text/javascript" src="resources/js/ol.js"></script> 
    <script type="text/javascript" src="resources/js/map.js"></script> 
    <p:layoutUnit> 
     <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"/> 
     <h:form id="mainForm"> 
     <!--content--> 
     <p:commandButton value="Build PDF" class="buttonFont" process="@all" actionListener="#{bean.createPDF}"  ajax="false"/> 
     </h:form> 
    </p:layoutUnit> 
    <p:layoutUnit position="center"> 
    <h:panelGroup layout="block" id="map"> 
    </h:panelGroup> 

Script map.js:

var map; 
var osmlayer = new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }); 

var position = ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'); 
     var view = new ol.View({ 
      center : position, 
        zoom : 12 

map = new ol.Map({ 
       target : document.getElementById('map'), 
       layers : [osmlayer], 
       controls : [ new ol.control.Zoom(), new ol.control.ScaleLine({ 
        geodesic : true 
       }), new ol.control.Attribution(), new ol.control.Rotate() ], 
       view : view 
      }); 

Ich brauche, um ein Bild zu bekommen (png/jpeg) von dem, was auf meiner Karte angezeigt ist, und es wird zu einem neuen PDF von itextpdf im aktuellen ManagedBean erzeugt hinzu:

@ManagedBean(name = "bean") 
@ViewScoped 
public class mapBean{ 

    public void createPDF(){ 
     Document document = new Document(PageSize.A4, 50, 50, 50, 50); 
     ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext(); 
     ec.setResponseHeader("Content-Type", "application/pdf"); 
     ec.setResponseHeader("Content-Disposition", "attachment; filename=\"Title.pdf\""); 
     try{ 
      PdfWriter writer = PdfWriter.getInstance(document,ec.getResponseOutputStream()); 
      document.open(); 
      Image mapPDF = Image.getInstance(/*Set image from map*/); 
      mapaPDF.scaleToFit(450,200); 
      document.add(mapaPDF); 
      document.close(); 
      FacesContext.getCurrentInstance().responseComplete(); 
     } 
     catch (Exception er) { 
     // TODO Auto-generated catch block 
     er.printStackTrace(); 
     } 
    } 
} 

Answer 1

Sie brauchen nicht zu tun, es auf dem Aufschlag r Seite. Sie können es einfach auf der Client-Seite tun.

Kontrolle dieses example

Sie können die Karte Bild erhalten aus der Leinwand canvas.toDataURL('image/jpeg');

Answer 2

in JavaScript verwenden, habe ich eine Funktion, um die Leinwand von der Karte zu bekommen und fügen Sie ihn in eine h:inputHidden:

function imagePDF(){ 
 
\t \t \t canvas = document.getElementsByTagName('canvas')[0]; 
 
\t \t \t var imagen = canvas.toDataURL('image/png'); 
 
\t \t \t document.getElementById('mainForm:imagen').value = imagen; 
 
\t \t }

Ich nenne diese Funktion innerhalb der p:commandButton:

<?xml version="1.0" encoding="UTF-8"?> 
 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
 
    xmlns:f="http://java.sun.com/jsf/core" 
 
    xmlns:h="http://java.sun.com/jsf/html" 
 
    xmlns:p="http://primefaces.org/ui"> 
 
    <ui:define name="title"></ui:define> 
 
    <ui:define name="content" style="border-style: none;"> 
 
    <script type="text/javascript" src="resources/js/ol.js"></script> 
 
    <script type="text/javascript" src="resources/js/map.js"></script> 
 
<p:layoutUnit> 
 
     <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"/> 
 
     <h:form id="mainForm"> 
 
     <h:inputHidden id="imagen" value="#{reporteController.imagen}" /> 
 
     <!--content--> 
 
     <p:commandButton value="Build PDF" class="buttonFont" process="@all,mainForm:imagen" onclick="imagePDF();" actionListener="#{bean.createPDF}" ajax="false"/> 
 
     </h:form> 
 
    </p:layoutUnit> 
 
    <p:layoutUnit position="center"> 
 
    <h:panelGroup layout="block" id="map"> 
 
    </h:panelGroup>

Und im ManagedBean retireve i den Inhalt der h:inputHidden und mit dem Decodierprozess der Leinwand gehen und ein Byte-Array erhalten, die Ich kann in das PDF:

@ManagedBean(name = "bean") 
@ViewScoped 
public class mapBean{ 

    public String getImagen() { 
     return imagen; 
    } 

    public void setImagen(String imagen) { 
     this.imagen = imagen; 
    } 

    public void createPDF(){ 
     Document document = new Document(PageSize.A4, 50, 50, 50, 50); 
     ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext(); 
     ec.setResponseHeader("Content-Type", "application/pdf"); 
     ec.setResponseHeader("Content-Disposition", "attachment; filename=\"Title.pdf\""); 
     try{ 
      PdfWriter writer = PdfWriter.getInstance(document,ec.getResponseOutputStream()); 
      document.open(); 
      BASE64Decoder decoder = new BASE64Decoder(); 
      byte[] decodedBytes = decoder.decodeBuffer(getImagen().split("^data:image/(png|jpg);base64,")[1]); 
      Image mapPDF = Image.getInstance(decodedBytes); 
      mapaPDF.scaleToFit(450,200); 
      document.add(mapaPDF); 
      document.close(); 
      FacesContext.getCurrentInstance().responseComplete(); 
     } 
     catch (Exception er) { 
     // TODO Auto-generated catch block 
     er.printStackTrace(); 
     } 
    } 
}