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

[netsgo]

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

大家给个思路或方法，谢谢啊！

[netsgo]

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

[yangfeihu]

基本没可能（flash也许可以）; js取得这个图像的innerHTML ？？？ 这是什么话,难道可以取得到图片的字节吗??
innerHTML 只能取得到html代码而已,简而言之取的是文本.

想法虽好，一些web基础问题要加强.

[netsgo]

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

[netsgo]

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

[向万里]

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

[xuweilinjiba]

你这种情况是可以实现的,具体思路如下:对你的操作页面进行截图,我这里有具体实现的代码,你可以参考一下: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

[netsgo]

谢谢楼上，虽然不是我最理想的方案,不过也是一种思路，我先下来看看。

[寻道的 Programmer]

这样可以实现吗

[getserved]

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

[txyly998]

下面是我们项目用到的，你可以参考一下

//生成缓冲图象
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);
}

[ijse]

用JS不太能实现吧，可能需要写一个浏览器插件。。。

其实使用Java 的Applet或者可以解决 。。。

[netsgo]

[Quote=引用 12 楼 getserved 的回复:]
真不是谁错了,你自己也说是要提交到服务器处理的，本地是无法处理的，你非要较真就用9楼的方法吧，是唯一可以本地解决的办法
[/Quote]
你看错了，我说的不是你，呵呵。我也说了前端不行就借助后端。
说的再直白一点就是怎么把一个html页面变成一幅图。
9楼的办法我试了可行，就是有点麻烦，而且似乎不太稳定。但算是把问题解决了吧。
9楼的思路是可行的，就是希望有更好的转换工具。

我可能有点求完美，呵呵。

[netsgo]

期待有更好的解决方案。

[getserved]

真不是谁错了,你自己也说是要提交到服务器处理的，本地是无法处理的，你非要较真就用9楼的方法吧，是唯一可以本地解决的办法

[netsgo]

楼上，已经说了不是验证码。谢谢。

[ajaxuser001]

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

[wyl20032005]

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

[op_kin930]

引用 17 楼 wyl20032005 的回复:

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

同求....遇到了相同的问题..非常困扰

[m43333]

引用 16 楼 netsgo 的回复:

楼上，已经说了不是验证码。谢谢。

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