在浏览器中的 WEB 操作,要求达到如下效果: 把一个小图片拖拽到另外一个大图片中,这样图片就能重合在一起了。然后将两个图片拼接为一个整体的新图片。这就是所谓的在线图片创作啦。 我看这个功能得用 JQUERY+HTML5 做了。客户不推荐使用 FLASH。 有没有好的建议啊?
下面我有一些学习资料,是我这两天研究出来的东东,随便写写,大家可以跳过不看,主要是给点建议。 Web Handling Image ImageMagick http://www.imagemagick.org/Usage/crop/#crop convert rose: -crop 40x30+10+15 crop.gif 40 is width 30 is height 10 is left offset and 15 is height offset.
http://www.imagemagick.org/script/composite.php png composite png not suitalbe. composite -gravity center -geometry +10+15 smile.gif rose: rose-over4.png rose means rose.jpg rose-over.png is the generated image. -geometry +10+15 means offset 10 15
http://www.imagemagick.org/script/command-line-options.php convert IMG_2964_.jpg -gravity Center -region 100x100-100+40 -negate output3.jpg -gravity Center means at position of center of the image -region means a region 100x100-100+40 the same as pre
Jcorp Get the x,y position and width height of image for ImageMagick. Then use ImageMagick to corp it. Or use html5+Jquery(not sure whether via server-side process) http://calebevans.me/projects/jcanvas/docs.php?p=images
JqueryFileUpload https://github.com/blueimp/jQuery-File-Upload Can handling multiple images and show processing bar. show image in canvas and drag & drop an image file onto this webpage use https://github.com/blueimp/JavaScript-Load-Image
downsize a picture use js example: 500k to 200k http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas
html5 Games http://www.danfornace.com/elementimals/ http://rumpetroll.com/
总体感觉 HTML5 绝对是个新潮的玩意,见上面的两个游戏。JQUERY 用好了事半功倍。我 JQUERY 还不是很强,要多努力学习了。