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

gazeldx · October 24, 2012 · Last by gazeldx replied at October 25, 2012 · 4797 hits

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

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

Unknow user #2 October 25, 2012

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

Unknow user #4 October 25, 2012

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

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

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

You need to Sign in before reply, if you don't have an account, please Sign up first.