网页合成图片笔记

来源：互联网发布：json教程pdf 编辑：程序博客网时间：2024/04/28 23:03

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

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

0 0