前台js(canvas)生成图片,通过后台java进行保存:
本来我的目的是要通过前台一个按钮点击后生成一个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类的方法,顺便传递数据
- }
- });
- }
(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);就可以了。