pix

PixelEditor

📷 [v2 development started 🧵] An image editor and engine using CoreImage

Showing:

Popularity

Downloads/wk

0

GitHub Stars

2.2K

Maintenance

Last Commit

7mos ago

Contributors

8

Package

Dependencies

2

License

MIT

Categories

Readme

⚠️ v2 development is in progress.

💥 Development for the next major version (v2) has started! Find out more here, and if you're excited please hit the reaction button!

This update will obviously include many breaking changes. Feel free to start a discussion. I often upload movies of features in development to the pull-request's comments.

To use the stable version, please checkout the master branch.

📌 Pixel needs a new name! Post your idea here. The leading name right now is BrightRoom?


v2(WIP) Pixel - Composable image editor

Pixel v2 provides the following features:

  • Components are built separately and run standalone using an EditingStack.
  • Create your own image editor UI by composing components.
  • EditingStack manages the history of editing and renders images. It's like a headless browser.

Use Built-in fullstack image editor

  • TODO

Build your own cropping screen

CropView is a component that only supports cropping.

CleanShot 2021-03-08 at 20 51 11

UIKit

let image: UIImage
let view = CropView(image: image)

let resultImage = view.renderImage()

SwiftUI

struct DemoCropView: View {
  let editingStack: EditingStack

  var body: some View {
    VStack {
      // ✅ Display a cropping view
      SwiftUICropView(
        editingStack: editingStack
      )
      // ✅ Renders a result image from the current editing.
      Button("Done") {
        let image: UIImage = editingStack.makeRenderer().render()
      }
    }
    .onAppear {
      editingStack.start()
    }
  }
}

(v1) Pixel - Engine • Editor

Image editor and engine using CoreImage

Support Muukii

Hi, I'm working on open-source software with a lot of time. Please help me continue my work. I appreciate it.

https://github.com/sponsors/muukii

In Production

Features

Currently accepting PRs that impement these features.

Performance

  • ✈️Pretty Good
  • 🚀Blazing Fast (🌀Anyone help us!)

Adjustment

  • Crop
  • Straighten (🌀Anyone help us!)
  • Perspective (🌀Anyone help us!)

Filter

Presets

  • ColorCube (Look Up Table)
    • Intensity

⚠️ Currently, Pixel does not contain LUT. Demo app has sample LUTs.

And also, here is interesting article

Edits

  • Brightness
  • Contrast
  • Saturation
  • Highlights
  • Shadows
  • Temperature
  • GaussianBlur
  • Vignette
  • Color (Shadows / Highlights)
  • Fade
  • Sharpen
  • Clarity
  • HLS (🌀Anyone help us!)

Other

Requirements

  • Swift 4.2 (Xcode10+)
  • iOS 10+

Getting Started

Demo.app contains the sample code. Please check out Sources/Demo/EditorViewController.swift.

Create instance of PixelEditViewController

let image: UIImage

let controller = PixelEditViewController(image: image)

Show

  • as Modal

⚠️ Currently we need to wrap the controller with UINavigationController. This is because PixelEditViewController needs a UINavigationBar.

let controller: PixelEditViewController

let navigationController = UINavigationController(rootViewController: controller)

self.present(navigationController, animated: true, completion: nil)
  • as Push

We can push the controller in UINavigationController.

let controller: PixelEditViewController
self.navigationController.push(controller, animated: true)

Setup Delegate

PixelEditViewController has delegate protocol called PixelEditViewControllerDelegate.

public protocol PixelEditViewControllerDelegate : class {
  func pixelEditViewController(_ controller: PixelEditViewController, didEndEditing editingStack: SquareEditingStack)
  func pixelEditViewControllerDidCancelEditing(in controller: PixelEditViewController)
}

💡PixelEditViewController does not know how to dismiss or pop by itself. So we need to control PixelEditViewController outside.

Basically, it's like following code, recommend dismiss or pop in methods of delegate.

extension EditorViewController : PixelEditViewControllerDelegate {

  func pixelEditViewController(_ controller: PixelEditViewController, didEndEditing editingStack: SquareEditingStack) {

    self.navigationController?.popToViewController(self, animated: true)
  }

  func pixelEditViewControllerDidCancelEditing(in controller: PixelEditViewController) {
  
    self.navigationController?.popToViewController(self, animated: true)
  }

}

Render Image

let editingStack: SquareEditingStack

let image = editingStack.makeRenderer().render(resolution: .full)

Restore editing

We can take current editing as instance of EditingStack from PixelEditViewController.editingStack.

If we want to restore editing after closed PixelEditViewController, we use this.

let editingStack = controller.editingStack
// close editor

// and then when show editor again
let controller = PixelEditViewController(editingStack: editingStack)

Add ColorCubeFilters

We can use LUT(LookUpTable) with CIColorCubeFilter.

LUT is like this (Dimension is 64)

import PixelEngine

let lutImage: UIImage

let filter = FilterColorCube(
  name: "Filter Name",
  identifier: "Filter Identifier",
  lutImage: lutImage,
  dimension: 64
)

let storage = ColorCubeStorage(filters: [filter])
let controller = PixelEditViewController(image: image, colorCubeStorage: storage)

And also, if we don't specify colorCubeStorage, use default.

// set
ColorCubeStorage.default.filters = filters

// get
ColorCubeStorage.default.filters

Customize Control-UI

We can customize UI for control area.

Customize Built-In Control-UI using override

There is Options struct in PixelEditor. We can create options that fit our usecases.

So, If we need to change ExposureControl, override ExposureControlBase class. Then set that class to Options.

var options = Options.default
options.classes.control.brightnessControl = MyExposureControl.self

let picker = PixelEditViewController(image: image, options: options)

It's like using custom Cell in UICollectionView. If you have any better idea for this, please tell us💡. And also Built-In UI may need expose some properties to customize from subclassing.

Customize whole Control-UI

We can also customize whole UI.

Override options.classes.control.rootControl, then build UI from scratch.

For example, if you don't need the filter section but only the edit mode, you may want to create a control like:

final class EditRootControl : RootControlBase {

   private let containerView = UIView()

   public let colorCubeControl: ColorCubeControlBase

   public lazy var editView = context.options.classes.control.editMenuControl.init(context: context)

   // MARK: - Initializers

   public required init(context: PixelEditContext, colorCubeControl: ColorCubeControlBase) {

       self.colorCubeControl = colorCubeControl

       super.init(context: context, colorCubeControl: colorCubeControl)

       backgroundColor = Style.default.control.backgroundColor

       layout: do {

           addSubview(containerView)

           containerView.translatesAutoresizingMaskIntoConstraints = false

           NSLayoutConstraint.activate([

               containerView.topAnchor.constraint(equalTo: containerView.superview!.topAnchor),
               containerView.leftAnchor.constraint(equalTo: containerView.superview!.leftAnchor),
               containerView.rightAnchor.constraint(equalTo: containerView.superview!.rightAnchor),
               containerView.bottomAnchor.constraint(equalTo: containerView.superview!.bottomAnchor)
           ])
       }
   }

   // MARK: - Functions

   override func didMoveToSuperview() {
       super.didMoveToSuperview()

       if superview != nil {
           editView.frame = containerView.bounds
           editView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

           containerView.addSubview(editView)
       }
   }
}

And use it this way:

var options = Options.default
options.classes.control.rootControl = EditRootControl.self

let picker = PixelEditViewController(image: image, options: options)

Filter some edit menu

If there are some edit options you don't need in your app, you can choose edit options you want to ignore:

var options = Options.default
options.classes.control.ignoredEditMenu = [.saturation, .gaussianBlur]
let controller = PixelEditViewController.init(image: UIImage(named: "large")!, options: options)

Localization

Strings in UI can be localized with L10n.

import PixelEditor

PixelEditor.L10n.done = "保存"

// or
PixelEditor.L10n.done = NSLocalizedString...

Installation

CocoaPods

Pixel is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'PixelEngine'
pod 'PixelEditor'

Carthage

For Carthage, add the following to your Cartfile:

github "muukii/Pixel"

Contributing

If you need more features, please open issue or submit PR! Muukii may not know the approach to take for implementing them, So your PR will be very helpful.

Development

To develop Pixel, setup environment of development with following code.

$ pod install
$ open Pixel.xcworkspace

Author

Muukii (muukii.app@gmail.com)

License

Pixel is available under the MIT license. See the LICENSE file for more info.

FOSSA Status

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial