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

我有一个网页，使用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>  

我需要从地图上显示的内容中获取图像（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();
        }
    }
}

---

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

检查这个

您可以使用

---

canvas.toDataURL（'image/jpeg'）
您不需要在服务器端执行此操作。
你可以在客户端完成

检查这个

您可以使用
canvas.toDataURL（'image/jpeg'）
在javascript中，我创建了一个函数来获取地图的画布并将其插入
h:inputHidden
：


函数imagePDF（）{
canvas=document.getElementsByTagName（'canvas'）[0]；
var imagen=canvas.toDataURL（'image/png'）；
document.getElementById（'mainForm:imagen'）。value=imagen；
}
在javascript中，我创建了一个函数来获取地图的画布，并将其插入
h:inputHidden
：


函数imagePDF（）{
canvas=document.getElementsByTagName（'canvas'）[0]；
var imagen=canvas.toDataURL（'image/png'）；
document.getElementById（'mainForm:imagen'）。value=imagen；
}
如果您熟悉JavaScript PDF生成，如果不使用
canvas.toDataURL（'image/jpeg'），它确实是一个不错的选择
生成您的图像，然后您可以将其发送到您熟悉的技术并生成pdf（如java itext等）。如果您熟悉JavaScript pdf生成，如果不使用
canvas.toDataURL（'image/jpeg'），这确实是一个不错的选择
生成您的图像，然后您可以将其发送到您熟悉的技术并生成您的pdf（如java itext等）
@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();
        }
    }
}