如何从地图中导出图像并将其插入到新的 PDF 文件中？

Question

我有一个网页，我使用 openstreetmap 的 ol3 库和 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>  

脚本 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
            }); 

我需要从地图上显示的内容中获取图像（png/jpeg），并将其添加到当前 ManagedBean 中由 itextpdf 生成的新 PDF：

@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

您不需要在服务器端执行此操作。 您可以在客户端执行此操作。

检查这个example

您可以使用以下方法从画布中获取地图图像 canvas.toDataURL('image/jpeg');

Answer 2

在javascript中，我创建了一个函数来获取地图的画布并将其插入h:inputHidden：

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

我在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>  

在 ManagedBean 中，我检索 h:inputHidden 的内容并继续画布的解码过程并获得一个字节数组，我可以将其插入 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();
        }
    }
}