网页合成图片笔记

一个烂尾项目，让我做一个页面功能，要求页面上传图片，文字。我来做后台合成。

跟前端工程师商议的是以一个js对象做信息载体，如下

var template ={
			width:"700px",
			height:"300px",
			pic:[{
				name:"主体图片",
				x:"0",
				y:"100px",
				width:"700px",
				height:"200px",
				src:"images/pic.jpg"
			},{
				name:"logo",
				x:"0",
				y:"10px",
				width:"100px",
				height:"40px",
				src:"images/logo.png"
			}],
			text:[{
				name:"标题",
				x:"50px",
				y:"100px",
				text:"黄海波嫖娼被抓女主角曝光"
			},{
				name:"内容",
				x:"450px",
				y:"200px",
				text:"黄海波嫖娼事件<br>细节曝光 爆料者或涉嫌侵害隐私<br>黄海波被指常赴会<br>所玩乐 被抓前携女友度假回京"
			},{
				name:"网址",
				x:"0px",
				y:"270px",
				text:"http://www.qq.com/"
			}]
		};

规定了宽高，需要的图片，文字等。

用户操作的旋转，裁切，缩放等  均在页面上由js实现，并实时影响到该js对象。由前端工程师负责，我则负责ajax提交时，将此js对象信息传到后台，并在后台用java创建，合成图片并最终输出。

实际中遇到的问题：

ajax参数提交js对象，那么它就是一个json格式。

使用 $.ajax()方法, 的 data 参数, 后面就是跟的 json对象.

 $.ajax({data:template });
等价于
 $.ajax({data:{width:"700px",height:"300px",pic:...} });
在server(服务器端) 是获取不到整个对象j的.，因为Ajax已经把 json对象j 转换为 name=王&password=123456。如果你用火狐浏览器的调试工具 Firebug, 就能看到 Ajax的请求。如图

这样，你可以直接用request.getparameter("width")等来获取参数。

但问题是图片和文字都是数组，我事先也不会知道有多少个。怎么动态获取就成了问题，在js中迭代  拼装字符串也不是不可，但不够优雅。

我已经写好后台对应的javabean，现在就卡在自动映射上了。

开发时发现，这样传到后台的值都是有中括号的，如request.getparameter("pic[0][name]");这样无法使用jsonlib中的方法直接toBean。

于是引入了json2.js   data:{"entity":JSON.stringify(template)},//要发送的数据,格式化为json格式

后台

String string = request.getParameter("entity");
MyEntity msg = (MyEntity) JSONObject.toBean(JSONObject.fromObject(string),MyEntity.class);

成功封装到了后台类里

接下来的工作，就是绘制图片了。作为一个后台程序员，很少使用awt里的api。从头开始啊
api里相关的有Graphics Image这两个以及其衍生的类

//创建画板  与模板大小一致
		BufferedImage bi = new BufferedImage(Integer.parseInt(msg.getWidth()), 
				Integer.parseInt(msg.getHeight()), BufferedImage.TYPE_INT_RGB);
		
		Graphics g = bi.getGraphics();
		//填充画板为白色
		g.fillRect(0, 0, Integer.parseInt(msg.getWidth()),Integer.parseInt(msg.getHeight()));
		//绘制图片
		g.dispose();
		bi.flush();
		
		AppPicEntity[] pics = msg.getPic();
		for (AppPicEntity pic : pics) {
			String path = StringUtils.substringAfter(pic.getSrc(), "imageConduct/");
			path = filePath+"/"+path;
			BufferedImage img = ImageIO.read(new FileInputStream(new File(path)));
			g = bi.getGraphics();
			g.drawImage(img,
					Integer.parseInt(pic.getX()), 
					Integer.parseInt(pic.getY()), 
					Integer.parseInt(pic.getWidth()), 
					Integer.parseInt(pic.getHeight()),
					null, 
					null
					);
			g.dispose();
			bi.flush();
		}
		//加入文字
		AppTextEntity[] text = msg.getText();
		for (AppTextEntity t : text) {
			g = bi.getGraphics();
			//设置当前上下文颜色
			g.setColor(Color.black);
			g.drawString(t.getText(),
					Integer.parseInt(t.getX()), 
					Integer.parseInt(t.getY())
					);
			g.dispose();
			bi.flush();
		}
		bi.flush();
		
		try {
			FileOutputStream fos = new FileOutputStream(newPaht); 
			ImageIO.write(bi, "jpg",fos);
			fos.close();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}