如何将一段innerHTML内容转换成一幅图(jpg、pdf等格式)？

Question

最近在用一个前端画图工具（纯js）在前端页面画图，现在我想把画出的内容转换成一幅图片(jpg、pdf等格式)。
页面中工具画完的图我可以通过js取得这个图像的innerHTML。但如何将这个innerHTML转换成图呢？
具体操作时这样子：用户点击某个按钮，然后象下载一样弹出一个对话框，程序将页面中制定的画面生成了一张图片供用户下载。
1、前端可以用js直接实现吗？怎么实现？
2、还是必须借助后台，将innerHTML传到后台，然后再模拟下载？
innerHTML传到后台了，用java怎么将它变成二进制图像数据流？大家给个思路或方法，谢谢啊！

Answer 1

前端JS無法輸出文件所以不可以做，請在後臺生成HTML再RESPONSE出來，前端用JS模擬上傳一個文件，具體請去查詢AJAX上傳文件的例子，這個文件的內容便是二進制的，後臺接收后寫成文件流傳回客戶端

Answer 2

下面是我们项目用到的，你可以参考一下 //生成缓冲图象
            synchronized (this)
            {
                BufferedImage image = new BufferedImage(width, height,
                        BufferedImage.TYPE_INT_RGB);                //取得绘图对象
                Graphics2D g = (Graphics2D) image.getGraphics();                g.setColor(new Color(198, 221, 254));
                //填充背景色
                g.fillRect(0, 0, width, height);
                g.setColor(new Color(165, 199, 255));
                g.drawRect(0, 0, width - 1, height - 1);
                g.setColor(new Color(255, 255, 255));
                g.drawRect(1, 1, width - 3, height - 3);
                //设置字体颜色
                g.setColor(Color.DARK_GRAY);
                //绘画干扰线
                for (int i = 0; i < 4; i++)
                {
                    int x_b = ran.nextInt(width);
                    int x_e = ran.nextInt(width);
                    int y_b = ran.nextInt(height + 10);
                    int y_e = ran.nextInt(height + 10);
                    g.drawLine(x_b, y_b, x_e, y_e);
                }
                //设置字体样式
                g.setFont(new Font("System", Font.BOLD, 14));
                //写入指定文字
                g.drawString(sb_str, 5, 15);                g.dispose();
                JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response.
                        getOutputStream());
                encoder.encode(image);
            }

Answer 3

楼上误会我的意思了，不是要在前端画一幅图。你这个是随机生成验证码图片，和我的问题无关。
而是将前端用js画的图（这个图在浏览器的内存就是一长串html语句）的innerHTML内容转换成一副真正的图片文件--ph1.jpg，格式可以是jpg，也可以是pdf。
说白了就是把 html语句转化成图片。

Answer 4

基本没可能（flash也许可以）;  js取得这个图像的innerHTML ？？？ 这是什么话,难道可以取得到图片的字节吗??
innerHTML 只能取得到html代码而已,简而言之取的是文本. 想法虽好，一些web基础问题要加强.  

Answer 5

楼上的，你错了。确实可以做到。
我现在用的这个画图表的工具HighCharts就可以做到，我看了源码，导出图片这部分就是把innerHTML作为表单（动态构造的）内容提交到了它们网站处理。然后返回了下载对话框。
但是我不能要求用户在使用时能上互联网，所以我必须自己处理。
也许这部分功能HighCharts要收费。

Answer 6

补充一下。那个innerHTML内容就是js动态生成的画图内容。
我把那段innerHTML截获以后放在一个html文件的div中直接打开，就可以在浏览器中看到那幅图。
div中就是一段段html代码。

Answer 7

document.getElementById(divName).all.item();
item里面可以是子标签的名字，或者是div中标签的顺序。

Answer 8

你这种情况是可以实现的,具体思路如下:对你的操作页面进行截图,我这里有具体实现的代码,你可以参考一下:http://xuweilinjiba.download.csdn.net/user/xuweilinjiba/java%E7%89%88%E6%9C%AC%E7%9A%84%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E5%AE%9E%E4%BE%8B

Answer 9

用JS不太能实现吧，可能需要写一个浏览器插件其实使用Java 的Applet或者可以解决  

Answer 10

你看错了，我说的不是你，呵呵。我也说了前端不行就借助后端。
说的再直白一点就是怎么把一个html页面变成一幅图。
9楼的办法我试了可行，就是有点麻烦，而且似乎不太稳定。但算是把问题解决了吧。
9楼的思路是可行的，就是希望有更好的转换工具。我可能有点求完美，呵呵。

Answer 11

验证码？  我们公司做的是在jsp页面做的  生成验证码后 放入session  不知你感觉是否可以满足你的需求  如需要qq104812879

Answer 12

我也遇到了这个问题，是想把一个div中的地图以及地图分析出来的一些要素，把这个div转化成图片，存起来，可惜没实现，不知楼主你的问题解决了没？解决 了的话，能否分享一下你的方法？

Answer 13

楼主有办法了么？我现在也涉及到这样一个问题，想把一段html代码片段转换成图片格式。