新手问题 公司让我实现一个功能,该功能主要是针对图片的处理,大家来研究一下

gazeldx · 2012年10月24日 · 最后由 gazeldx 回复于 2012年10月25日 · 4070 次阅读

在浏览器中的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还不是很强,要多努力学习了。

共收到 6 条回复

分开上传两张图,JS 获取重叠的坐标点,提交后服务端组合图片。

你得问清楚,是否只是正向放大或缩小,有没有啥的旋转啊,拉伸啊 如果有。。。嘿嘿,挺复杂的。。。flex来做好点。。。以前DIY t恤项目里有这东东

HTML5 Canvas 估计可以做这个功能. 将图片装在到 Canvas中, 在Canvas中对图片做处理. 处理好后调用 canvas.getImagaData(). 建议使用这个库: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

可能是我的语文不好“把一个小图片拖拽到另外一个大图片中,这样图片就能重合在一起了。然后将两个图片拼接为一个整体的新图片”,没有明白怎么回事,两个图片怎么能重合在一起,是有个美女,拖件衣服上去,美女就穿上衣服了?

@jimrokliu 是呀,你的理解很形象也很正确。感谢4楼@wity_lv,此法很好。@huacnlee 我打算用kineticjs去做。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册