网页合成图片笔记

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

跟前端工程师商议的是以一个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();
}

秒客网

网页合成图片笔记

相关文章