前台js（canvas）生成图片，通过后台java进行保存_canvas生成的图片直接出那递给后端么-优快云博客

本文介绍了一种解决方法，通过前端js利用canvas将页面截屏为图片，然后借助ajax通过DWR框架将base64编码的图片数据传送到后台Java，Java端再转码并保存为本地图片，最后将图片添加到PDF中，以实现不通过浏览器下载直接保存到本地的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

本来我的目的是要通过前台一个按钮点击后生成一个pdf文件保存到电脑，然后我是用的jspdf做的，但是这玩意（js）只能通过浏览器下载的方式保存到电脑，但是需求是直接保存到本地不通过浏览器下载，这就很尴尬了，咱知道js是基本无法这样操作的，就算强行要操作便是打开activeXObject这种不兼容又有安全问题的东西，所以只好另辟蹊径，用java来搞了。

思路：

1.原来生成pdf的方式是通过html5canvas的一种方法，将页面某部分截图成图片，然后添加到jspdf对象（关于jspdf大家可以看上一篇博文）。

2.但是现在不能用js，所以我们只保留canvas图片，然后将图片数据传往后台java，至于传送方法就不多讲，ajax，mvc什么的随便，这里我用的是ajax的dwr框架。

3.java接收后，对图片数据进行转码，保存到本地图片。

4.对本地图片操作添加到pdf对象。

源码：

(js部分)

function pdfTest(){ 
        html2canvas($('#bestfizz'), {  
        	onrendered: function(canvas){  
        	var dataURL = canvas.toDataURL('images/png');//获取图片数据URL，获取后是data:image/png;base64,iVBORw0KGgoA..后面一堆.. 
        	var imageDataB64 = dataURL.substring(22);//这里我们需要将上面获取的一堆东西截掉前面的“data:image/png;base64,”，只保留后面的  
        	//alert(imageDataB64);  
        	service.getPdf(imageDataB64);//我是用dwr框架可以直接调用java类的方法，顺便传递数据  
        	} 
        });  
}

service.getPdf(imageDataB64)后，我们转到该方法：

（java部分）

import java.awt.image.BufferedImage;  
import java.io.ByteArrayInputStream;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import javax.imageio.ImageIO;  
import com.itextpdf.text.Document;  
import com.itextpdf.text.DocumentException;  
import com.itextpdf.text.Image;  
import com.itextpdf.text.pdf.PdfWriter;  
import sun.misc.BASE64Decoder;

public static void getPdf(String imageDataUrl) throws IOException, DocumentException{  
        BASE64Decoder decoder = new BASE64Decoder();  
        byte[] b = decoder.decodeBuffer(imageDataUrl);  
        ByteArrayInputStream bais = new ByteArrayInputStream(b);  
        BufferedImage bi = ImageIO.read(bais);  
        File w2 = new File("D:/test/test/books.png");  
        ImageIO.write(bi,"png",w2);  
        Document document = new Document();  
        PdfWriter writer = PdfWriter.getInstance(document,new FileOutputStream("D:/test/test/books.pdf"));  
        Image image1= Image.getInstance("D:/test/test/books.png");  
        document.open();  
        document.add(image1);  
        document.close();  
        writer.close();  
        w2.delete();  
}

这里我是用itextpdf将图片添加到pdf，如果你只想要图片的话，就只需要到ImageIO.write(bi,"png",w2);就可以了。

涉及到的jar包或者js文件没有大家可以找我。

仅供参考，有问题可以找我，希望对大家有所帮助。