Personal License

  • Perpetual license (does not expire)
  • 1 application
  • Can distribute binary products only
  • Commercial use allowed
  • 6 months support
$34.99 Read License

Developer License

  • Perpetual license (does not expire)
  • Unlimited projects
  • Can distribute code and binary products
  • Commercial use allowed
  • 1 year support
$89.99 Read License

14 Day money-back guarantee

Full refund within 14 days of purchase date.

You need to log-in or create an account
  • Create an account
  • Log-in

Please use your real name.

Activation link will be sent to this address.

Minimum 8 characters

Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

(1 ratings)

iOS Image Editing Component

iOS Image Editing Component
Developed by Wenpo Sun, Released Nov 20, 2011

A standalone image editing component for iOS that can be incorporated into your own app or expanded upon. Includes drawing, camera function, image filters and effects.

Objective-C

Tags: art , brush , camera , capture

View Licenses $34.99+

This is a standalone Image Editor app that can be incorporated into your own app or expanded upon.

Features include:

  • Drawing brush with adjustable size, color and softness.
  • Camera function to take photos and use in your canvas.
  • Image filters for brightness, contrast, grayscale and vignette
  • Torn Photo effect
  • Save and Load to and from your iPhone image library

Related components

GoogleTranslateAPI for Objective-C FREE
Mobile Greetings App Starter Kit FREE
In-app purchase verification FREE
Back to top

How to use in your own app

The project that exists can be built as a standalone app. In order to integrate this in your own app you will need to do the following:

Step 1: Import all files in the "ImageEditor" folder into your own project. These files should be:

  • DoodlerView.h
  • DoodlerView.m
  • DoodlerView.xib
  • ColorSelector.h
  • ColorSelector.m
  • ColorSelector.xib
  • FilterSelect.h
  • FilterSelect.m
  • FilterSelect.xib
  • The 7 png files in the Resources group in the "ImageEditor" folder

Step 2: In your AppDelegate.h file of your project add the variables:

NSInteger selectedFilter;
NSInteger selectedColor;
float red;
float green;
float blue;

and their @properties:

@property (nonatomic) NSInteger selectedFilter;
@property (nonatomic) NSInteger selectedColor;
@property (nonatomic) float red;
@property (nonatomic) float green;
@property (nonatomic) float blue;

Refer to the existing AppDelegate.h in this project for reference.

Step 3: In AppDelegate.m add:

@synthesize navController, selectedFilter, red, green, blue, selectedColor;

and in the method "didFinishLaunchingWithOptions" initialise the values with

red=0;
green=0;
blue=0;
selectedFilter = 0;
selectedColor = 1;

Refer to the existing AppDelegate.m in this project for reference.

Step 4:

Now from wherever you want to use the Image Editor simply import "DoodlerView.h" and push the initialized object onto your navigationControllers Stack

E.g.

DoodlerView *imageEditor = [[DoodlerView alloc]init];
[self.navigationController pushViewController:imageEditor animated:YES];
[imageEditor release];

Important

The classes DoodlerView, FilterSelect and ColorSelector (both .h and .m files) have pointers to AppDelegate.h in order to access variables that can be used across all 3 classes. If your AppDelegate filename is different, remember to update the pointers in these files.

View Licenses $34.99+
View all 1 reviews »

User Reviews

  • 1 of 1 people found this review helpful Joseph 1 year ago
    Nice source code – Best support, Quick reply and the most important thing: You know your products very well and know how to solve the problems.
    Very highly recommended!
    Flag
    Was this helpful? Yes No
Read all 14 comments »

Questions & Comments


Or enter your name and Email
  • Dub 1 month ago
    Does this currently have the functionality to add "clip art" type elements to a photo, where we can supply the clip art elements in the app (as a silly example, adding cartoon cat ears on a photo of a person)? Thanks for any insight/info!
    Reply Flag
    • Wenpo Sun Developer 1 month ago
      Not exactly what you are describing. It does have the "torn paper effect" which technically is a pre-supplied image that is merged into the canvas. To do what you are describing will be a modification of the "torn paper effect"
      Reply Flag
    • Dub 1 month ago
      Kind of. Think of the app "Cat Wang," which allows kids to take a picture (either camera or camera roll), then "decorate" it with cat faces and other images from a menu within the app. I don't believe this component/project has that functionality yet, but my guess is it wouldn't be too difficult to add (well, for me yes, but for someone like you, perhaps not), and would add some valuable functionality to the project, as those types of apps are selling well.

      You'd have to be able to provide a customizable menu where we could supply our own "clip art" files, then once selected, the piece of "clip art" can be moved and/or sized on top of the image.

      Thanks for any thoughts!
      Reply Flag
    • Wenpo Sun Developer 1 month ago
      Definitely sounds like a great addition!
      I am currently tied up with other work at the moment but actually had a similar project planned to what your describing. I do have plans to do an updated iteration of this component in the future when the time is available.
      I really appreciate your feedback and suggestions:)
      Reply Flag
  • Sabrina Sterling License holderPersonal License 7 months ago
    Can you add filters?
    Reply Flag
    • Wenpo Sun Developer 7 months ago
      Yes you can!. Here are the basic parts of the filters which will get you started. In FilterSelect class, you can select the filter from the table view. This assigns appDelegate.selectedFilter a number. Eg number 1 for brightness, 902 for greyscale. The view Is popped back to DoodlerView after you select, and in "viewDiDAppear" it checks your selected filter and basically the functions called are "applyFilter" then "filterImage".

      You can see in "filterImage" it loops through each pixel and manipulates the BGRA values. Eg for the first pixel, the blue value is mPixelBuf[0], green is mPixelBuf[1] and red is mPixelBuf[2] while the alpha is mPixelBuf[3]. You can manipulate the pixel values to create your own filters.

      The other way is how vignette and the tear effect is done where a provided .png image with transparencies is merged over the existing image. This can be seen in "applyFilter" where appDelegate.selectedFilter == 901 Or in the function "applyTornEffectReal"
      Reply Flag
  • Adarsh Menon License holderPersonal License 10 months ago
    I'm interested in the filters and effects but want to remove the drawing component. Can that be done?
    Reply Flag
    • Wenpo Sun Developer 10 months ago
      Hi, that can easily be done. You just have to disable the code to do with the brush and remove the relevant ui.
      Reply Flag
You must be logged-in to vote. Log-in to your account or register now.