I am about to build a basic online image editor for my web application using rails and rmagick. I did a bit of googling but couldn't find any existing solution, however I'd like to be sure before I spend a lot of time rolling my own.
Is anyone aware of a plugin/gem that provides a pre-rolled image editor with undo/redo and minimal image degradation on multiple edits?
Thanks!
I know this exists: Rails Image Editor
http://github.com/heurionconsulting/rails_image_editor/tree/master
It might be too late but I'm building one too. I'm using the Pixastic and Raphael libraries to generate live previews. So people can actually preview the resulting image, without having to wait for the server to process it.
Features are:
Quick fit (make the image instantly fitting a given width, height or width and height)
Crop
Resize
Rotate left and right 90º (animated)
Flip horizontal and/or vertical
Colorize (color picker)
Make warmer (slider)
Make colder (slider)
Make greyscale (one click)
Make sepia (one click)
Glow (slider)
Blur (slider)
Sharpen (slider)
Brightness (slider)
Contrast (slider)
Details:
It is provided as a Rails plugin.
Currently it only works on Paperclip attachments.
Integration is piece of cake (js include and a link in the view, that's it!)
It is displayed as a lightbox-like overlay
All requests are Ajax (so no page reloading)
I skipped RMagick and built a dedicated ImageMagick module for serverside image processing
The whole frontend is based on Q, a javascript toolset providing a slider, color picker, floating windows, growl-like feature, I18n for javascript, decent Cookie management and much more.
configurable with a single YAML file
integrated languages are US English and Dutch
Possible downsides:
Live preview on color correction is not available on IE due to lack of HTML5 canvas support
The Q library is not free for commercial domains (only €49 per domain or €249 for a wildcard version)
This plugin will be available for free next month in Alpha release.
Related
I am researching into the best way to detect test in a photo using open source libraries.
I think the standard way is as follows (note: steps 1 - 4 all use OpenCV):
1) detect outline of document
2) transform document so it's flat and cropped, using said outline
3) Make the background of document white, using a filter
4) Feed resulting image to Tesseract
Is this the optimum process, or is there a better way, or better tools?
Also, what happens for case if the photo doesn't have a document outline (It's possible that step 1 & 2 are redundant)?
Is there anyway to automatically detect document orientation (i.e. portrait / landscape)?
I think your process is fine. I've used a similar process for an Android project.
I think that the only way you can discover if a document is portrait/landscape is to reason with the length of the sides of the bounding box of your outline.
I don't think there's an automatic way to do this, maybe you can find the most external contour approximable with a 4 segment polyline (all doable in opencv). In order to get this you'll have to work with contour hierarchy and contous approximation (see cv2.approxPolyDP).
This is how I would go for automatic outline detection. As I said, the rest of your algorithm seems just fine to me.
PS. I'll leave my Android project GitHub link. I don't know if it can be useful to you, but here I specify the outline by dragging some handles, then transform the image and feed it to Tesseract, using Java and OpenCV. Yeah It's a very bad idea to do that in the main thread of an Android app and yeah, the app is not finished. I just wanted to experiment with OCR, so I didn't care much of performance and usability, since this was not intended to use, but just for studying.
Look up the uniform width transform.
What this does is detect edges which have more or less the same width with respect to their opposite edge. So things like drainpipes (which can be eliminated at a later pass) but also the majority of text. Whilst conceptually it's similar to a distance transform, the published method uses rather ad hoc normal projection methods and Canny edge detection.
I am using the most excellent PHP library ePub to on-the-fly create digital books from HTML stored in my database.
As these are part of a collection, I am including a cover image for every book. Everything works fine in the code but depending upon the device/software interpreting the ePub, the image may get cut off. I have seen 600x800 pixels as a recommended size, but it still cuts it off (for example in Aldiko in Android). Is there a standard size that is recommended in the documentation?
Honestly, I would love a good and readable recommendation for documentation of the ePub format.
So, it seems that Aldiko has the problem, and not the other e-Readers I have tested (Calibre, Overdrive).
After trying various ratios, I found that Aldiko only respects the height:100% style I have called out in the height direction. It doesn't scale the image, only sets the height at 100% of the screen width. I am going to have to go with this being a bug in Aldiko, and keep the recommended 600x800 ratio for maximum resolution.
Another interesting thing I discovered as well; the Aldiko reader didn't recover as well from non-standard HTML. On one of the database entries, a <style> tag inside the <body> disappeared, but the style text did not. This is not the same for the other e-Readers.
The best general advice I found on the internet is Preparing Images for Ebooks Project (PIFEP).
I'm making a GUI for selecting regions to crop from images. I have been using Seesaw and cans select rectangular regions, but cannot find a way to set an image to the background of seesaw.canvas. This suggests using icons on labels. Can I make a label paintable and then use it as a canvas? Is there a way to overlap a label and a canvas or somehow use a panel that gives a background to its contents?
I think Quil has this functionality, but I'm not sure how to build a GUI around its draw, setup, sketch form if I want add widgets.
Existing solutions would appreciated as well, as long as I can decompose them. Using GIMP or Photoshop isn't an option for the workflow I want: multiple crops per photo, of different kinds on each page and different metadata added depending on the type of image outlined. Any suggestions for libraries for working with metadata for photos? I was planning on using a shell interface to exiftool, but a more portable option may be better.
You can draw a java.awt.Image (or sub-class) to a canvas with seesaw.graphics/image-shape:
(require '[seesaw.graphics :as g])
(defn paint-canvas [c g2d]
(g/draw g2d (g/image-shape my-image 0 0) (g/style)))
It seems like that should do it.
Also note that labels (and all Seesaw widgets) are paintable. Just set the :paint option like on a canvas and paint away.
I work for a window manufacturing company and would like to add the functionality within the website for customers to be able to customise a product online with a visual representation when adding parts to the order.
So my question really is when parts are selected is it possible to build an SVG image via ajax or maybe Raphael?
The parts would be:
width
height
color
glass type
grid on outside of glass and so on
thanks in advace
I would do it with carefully crafted images. You can easily grow / shrink an image, hide/display an image, and overlay them (keep transparency) all with javascript on the client.
I would not do it with AJAX, instead I'd just load all the images and display, hide or overlay as needed (assuming the number of options are within reason).
If my designer gives me a 960x640px image of what the screen should look like, as well as all of the individual elements as images or text, is there a way to lay out the images and text on the iPhone/iPad screen without doing it manually through code? The way I'm doing it now is a series of trial and error, trying to guess the position of each element.
By the way, the types of layouts I'm trying to do are simple static layouts for stuff like Menus and High Scores lists, etc.
You should try one of the editing tools: LevelHelper, CocoShop and CocosBuilder. The problem will be the output format, make sure that not only the editing part works to your specification but that you can actually use just the snippet of code you need to plug it into your code.
Do you have an image-editing software like Photoshop or GIMP? How about opening the 960x640px image with any such software, then hovering your mouse over the center of each element for its coordinates, and then finally pumping these values into your code?
In my opinion, this is at least better and way faster than trial and error:)
If you want to measure position of graphic elements. You can try a commercial called xscope. The trail version can be downloaded form their official website. It is the best tool I ever seen to measure distance, color(like, it can copy color measured directly to [UIColor ...] format), etc. If you want something freeware, I would like to recommend markman, which is a Chinese software, it's built on adobe air. All elements/button are graphic, so you don't need to read chinese to use it..
You can try to use some open source editor and write your exporter. For example I am using blender as a level editor for the game I am working on. It has a nice python API that can be used to export all the information you need.