Before asking my question, I have a test page to make it everyone understand my question better. The URL is http://iamthemoon.com/crop/
You can move the red selection.
I like to crop only the area of red selection. I thought it could be done easily in HTML5 canvas, but that was my mistake. First I googled about it 2 days, but I couldn't find a solution. There are many HTML5 based cropping tools, but they only have square selection.
I then looked into PHP GD and imagemagick, but I couldn't find a solution as well.
I looked at the adobe online photoshop, but they're missing free-form lasso tool or free-form selection tool as well.
did anyone see a similar javascript/php/ruby/ or any other web-based technology?
or is this even possible?
just to answer to the question if this is possible.
I had to deal with same problem and took me a (full) weekend to solve it using HTML5 .
Have a look at a demo here.
Hope it helps.
EDIT:
Just a bit of pseudocode:
1.Draw the picture on canvas.
2.Record mouse clicks on canvas.
3.Draw a pattern using the mouse clicks coordinates
4.Fill pattern with original image.
5. Replace original image with pattern.
EDIT:
Source code released https://github.com/netplayer/crop
I'm working on the same subject. My idea now was to draw the opposite polygon(s) and make these transparent using imagecolorallocatealpha.
The polygon is then drawn with imagefilledpolygon. For the client side we will be using predefined images (thus predefined polygons in php). I have come across this as well: http://brittonkerin.com/image_region_selector/irs_demo.html.
Hope this helps somewhat.
http://shedlimited.debrucellc.com/
use html5 to draw the line/ coordinates,
than just use clip() instead of stroke
Related
I know this question is pretty basic, and I'm sorry for posting it, but I literally have spent the last hour googling and I still havent found an answer.
I coded a blackjack game using pygame, and want to convert it to wxpython mostly as a way to learn wxpython. In pygame the graphics are easy, I have a base image I display (basically just the table), and then I can just display other images on top of it as the action unfolds, for example the cards. Each time the player hits I just draw a new card in a different position. When The hand is over and I want to go to the next hand, I just display the base image again, and it covers everything up and viola! Its really simple all I have to use is blit() and pygame.display.update().
I cant seem to find anyway to do this in wxpython. All the examples I find are for drawing items in new widgets, or drawing vector graphics over an image, or opening new frames with images, etc.
any help is greatly appreciated, thank you very much.
--Daniel
The AlphaDrawing example in the wxPython demo shows how to overlap multiple drawings. This uses wx.GraphicContext / wx.GCDC. If you look at the documentation, you'll note that it has CreateBitmapFromImage and CreateBitmap methods that probably apply to what you want to do. See also the DragImage demo and the following links for related information:
wx python card game
http://rummy-py.sourceforge.net/ (look at the original that was done in wx)
I found this post, which reading the comments, does a good job of showing me want I was looking for.
Delete image in wxpython?
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I am using SLARToolkit for Windows Phone and I am aware of how the toolkit uses markers to identify objects via the camera.
However, I would like the toolkit to recognize a certain image from the poster, e.g.:
(source: burgerbusiness.com)
In this poster I would like to detect the burger on the top right of that poster. How can I do that? Also, is there a better alternative for AR in WP?
It's a duplicate of the question posted at the project site and answered by me: http://slartoolkit.codeplex.com/discussions/394101
You can create custom markers, but they need to be b/w and framed by a black square. Here's how to: http://slartoolkit.codeplex.com/documentation
I am developing an application for viewing images.
I used the example of PhotoScroller Apple to implement this application.
In my application I want to be able to draw on the image.
I had the idea to put a UIView on top with transparent background and draw the lines via touch events. This solution has become very slow because the generated images are very large, around 3700x2000 pixels.
I also tried a solution with the example of Apple GLPaint that uses OpenGL, but it has a size limitation of 2048x2048 pixels.
Anyone have any idea or example of how I implement this?
I think you should try and tile your image.
One option is using CATiledLayer. Have a look at this short tutorial.
Or you could try and use CGContextDrawTiledImage to get your stuff done. Possibly this post from S.O. could help you getting started.
I am really sorry to post this question, because most likely the solution will be really simple. But I am completely out of search string ideas.
I have a running Geoserver and some custom shapefiles describing buildings etc. I can requesting maps as pngs with the WMS interface and display on a website. So for so good.
In the next step I want to enable the user to specify a coordinate an draw a little marker on the map. This position should not be stored anywhere, I just want to draw it for this user. I am pretty sure this is possible with a WMS request and an inline feature, but I had not any luck finding a working solution and I am out of google search strings.
Please help me before I start drawing overlays over a png map.
You can do this with an inline feature in your SLD - See http://lyceum.massgis.state.ma.us/wiki/doku.php?id=wms:sld:inline_feature for an example.
You can let OpenLayers do the drawing on the client.
Check this example to see how it can be done. It demonstrates how to draw lines, points, and polygons:
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/draw-feature.html