前台js（canvas）生成图片，通过后台java进行保存

前台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部分)

[html]  view plain  copy

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

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

（java部分）

[html]  view plain  copy

1. import java.awt.image.BufferedImage;    
2. import java.io.ByteArrayInputStream;    
3. import java.io.File;    
4. import java.io.FileOutputStream;    
5. import java.io.IOException;    
6. import javax.imageio.ImageIO;    
7. import com.itextpdf.text.Document;    
8. import com.itextpdf.text.DocumentException;    
9. import com.itextpdf.text.Image;    
10. import com.itextpdf.text.pdf.PdfWriter;    
11. import sun.misc.BASE64Decoder;  

[html]  view plain  copy

1. public static void getPdf(String imageDataUrl) throws IOException, DocumentException{    
2.         BASE64Decoder decoder = new BASE64Decoder();    
3.         byte[] b = decoder.decodeBuffer(imageDataUrl);    
4.         ByteArrayInputStream bais = new ByteArrayInputStream(b);    
5.         BufferedImage bi = ImageIO.read(bais);    
6.         File w2 = new File("D:/test/test/books.png");    
7.         ImageIO.write(bi,"png",w2);    
8.         Document document = new Document();    
9.         PdfWriter writer = PdfWriter.getInstance(document,new FileOutputStream("D:/test/test/books.pdf"));    
10.         Image image1= Image.getInstance("D:/test/test/books.png");    
11.         document.open();    
12.         document.add(image1);    
13.         document.close();    
14.         writer.close();    
15.         w2.delete();    
16. }  

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