iOS Image Editing Component

iOS Image Editing Component

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.

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
Hide

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.

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.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

2 licenses, starting from From » $9.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

  • 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!
    J Joseph
    3 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
Post a comment

Or enter your name and Email
  • VA Vivek Arora 10 months ago
    are you open to additional feature requests, eg. polygon selection tool to cut out unwanted areas etc.
    • Wenpo Sun Developer 10 months ago
      Hi Vivek, unfortunately I've got a lot of work on my plate at the moment so I'm unable to add extra features. I am however available to answer questions if you have any regarding the existing source code.
  • Elliot Lee 1 year ago
    Would this code enable a high-performance drawing app? i.e. can the screen be redrawn continuously at, say, 30 fps?
    • Wenpo Sun Developer 11 months ago
      The drawing tool draws lines between two points at the points between "touchesMoved" calls. This is based on the hardware/iOS. The code doesn't tap into the part that controls this.
  • D Dub 1 year 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!
    • Wenpo Sun Developer 1 year 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"
    • D Dub 1 year 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!
    • Wenpo Sun Developer 1 year ago
      Definitely sounds like a great addition!