在线主题制作技术实现方案
Posted 09月 7, 2008 
Comments(0)
Comments(0) 在做门户社区实现中，有类似魔秀（http://www.moxiu.com）的在线主题制作需求，这种用户生成内容（UGC）的形式对于活跃社区气氛、提高用户对社区的粘性是大有好处的。
1、技术实现核心问题：
- 提供用户自助上传图片的工具
- 根据用户手机的分辨率，提供在线图片编辑工具，让用户选择要裁剪的区域，作为要制作主题的图片的宽和高
- 用户提交选定的区域范围到服务器，后台程序根据用户选择图片指定的宽和高对图片进行自动裁剪，生成手机主题，当然还可以实现诸如打水印等功能
- 参考各手机平台主题的制作方法，把背景图片打包成手机主题
2、技术实现方案如下：
- 用户上传工具，直接使用struts2 的file upload 工具
- 在线图片选择工具，采用jquery的img area select plugin实现http://odyniec.net/projects/imgareaselect/
- 图片裁剪采用imagemagick实现，可以利用imagemagick的java接口，为灵活起见，避免由于java接口的不完备性及性能问题，使用Runtime.getRuntime().exec来直接调用imagemagick的命令行来完成。
依照此思路，编写了简单的测试代码，测试页面imgareaselect.html 用于演示img area select的使用。
ImagemagickTest.java是使用java 调用imagemagick接口调用实现图片操作的例子。
关于imagemagick其他功能使用的例子（例如打水印等）可以参考http://www.imagemagick.org/Usage/
以上只是实现了初步的在线对背景图片制作的步骤，后续可以按照各个操作系统的主题制作技术，实现诸如symbian平台主题sis、windows mobile cab的制作。
3、imgareaselect.html
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>imgAreaSelect examples</title> <link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href="imgareaselect.css"> </head> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.imgareaselect-0.5.js"></script> <link rel="stylesheet" type="text/css" href="base.css"> <!–[if IE 7]> <link rel="stylesheet" type="text/css" href="ie_7_hacks.css" /> <![endif]–> <!–[if IE 6]> <link rel="stylesheet" type="text/css" href="ie_6_hacks.css" /> <![endif]–> <script type="text/javascript"> function selectionEnd(img, selection) { //alert(’width: ‘ + selection.width + ‘; height: ‘ + selection.height+’; x2:’+selection.x2); } function preview(img, selection) { var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; $(‘#duck + div > img’).css({ width: Math.round(scaleX * 400) + ‘px’, height: Math.round(scaleY * 300) + ‘px’, marginLeft: ‘-’ + Math.round(scaleX * selection.x1) + ‘px’, marginTop: ‘-’ + Math.round(scaleY * selection.y1) + ‘px’ }); } $(document).ready(function () { $(‘<div><img src="duck.jpg" style="position: relative;" /></div>’) .css({ float: ‘left’, position: ‘relative’, overflow: ‘hidden’, width: ‘100px’, height: ‘100px’ }) .insertAfter($(‘#duck’)); $(‘#red’).click(function () { $(‘#duck’).imgAreaSelect({ selectionColor: ‘red’ }); }); $(‘#green’).click(function () { $(‘#duck’).imgAreaSelect({ selectionColor: ‘green’ }); }); $(‘#blue’).click(function () { $(‘#duck’).imgAreaSelect({ selectionColor: ‘blue’ }); }); }); /* 选择框初始化值大小设定，在社区实现时候选择框的初始化值由程序根据用户手机型号的分辨率来设定初始化值 通过设定最大值和最小值相等，来固定选择框的大小 */ $(window).load(function () { $(‘#duck’).imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210,maxHeight:120,maxWidth:160,minHeight:120,minWidth:160,resizable:false, onSelectChange:preview,onSelectEnd:selectionEnd }); }); </script> <body> <p style="text-align: left;"> <button id="red" type="button" style="color: red;">Red</button> <button id="green" type="button" style="color: green;">Green</button> <button id="blue" type="button" style="color: blue;">Blue</button> </p> <p style="text-align: center;"> <img id="duck" src="duck.jpg" alt="测试" title="测试" style="float: left; margin-right: 10px;"> </p> </body> </html>
4、ImagemagickTest
import org.apache.log4j.Logger; import java.io.IOException; public class ImagemagickTest { private static final Logger logger = Logger.getLogger(ImagemagickTest.class); private static final String CONVERT_PROG="C:/ImageMagick-6.3.9-Q16/convert.exe"; /** * @param command Description of the Parameter * @return Description of the Return Value */ private static boolean exec(String command) { Process proc; try { logger.debug("exec(String):Trying to execute command " + command); proc = Runtime.getRuntime().exec(command); } catch (IOException e) { System.out.println("IOException while trying to execute " + command); logger.fatal("exec(String):IOException while trying to execute " + command); return false; } if (logger.isDebugEnabled()) { logger.debug("exec(String):Got process object, waiting to return."); } int exitStatus; while (true) { try { exitStatus = proc.waitFor(); break; } catch (java.lang.InterruptedException e) { logger.fatal("exec(String):Interrupted: Ignoring and waiting"); } } if (exitStatus != 0) { logger.fatal("exec(String):Error executing command: " + exitStatus); } return (exitStatus == 0); } public static void main(String[] args) { String cmd=CONVERT_PROG; String parameter=" -crop 278×150+99+45 "; String inputFile=" D:/imagemagick/bee.jpg "; String outputFile=" D:/imagemagick/output1.jpg "; exec(cmd+parameter+inputFile+outputFile) ; } }
