PHPackages                             nlk/image-editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. nlk/image-editor

ActiveLibrary[Image & Media](/categories/media)

nlk/image-editor
================

A Laravel package for an advanced image editor.

v1.0(2mo ago)06MITJavaScriptPHP ^8.0

Since Mar 3Pushed 2mo agoCompare

[ Source](https://github.com/mahmudabbas0/image-editor)[ Packagist](https://packagist.org/packages/nlk/image-editor)[ RSS](/packages/nlk-image-editor/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

NLK Image Editor
================

[](#nlk-image-editor)

A powerful, customizable, and easy-to-integrate Image Editor package for Laravel. Provide your users with professional image editing capabilities directly within your application UI, without relying on external tabs or heavy desktop software.

[![Laravel Image Editor](https://camo.githubusercontent.com/ec0a14e90b58e439e890bb54c58c0943b6faab4ce10114f5700ab66eb6506d9e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d382532422d7265642e7376673f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c)](https://camo.githubusercontent.com/ec0a14e90b58e439e890bb54c58c0943b6faab4ce10114f5700ab66eb6506d9e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d382532422d7265642e7376673f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c)[![PHP 8.0+](https://camo.githubusercontent.com/7ff22d9af663966e7d48a95bbb563b97b4e065c4085a6a65f5d9becb0ef84c1c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e302532422d626c75652e7376673f7374796c653d666c61742d737175617265266c6f676f3d706870)](https://camo.githubusercontent.com/7ff22d9af663966e7d48a95bbb563b97b4e065c4085a6a65f5d9becb0ef84c1c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e302532422d626c75652e7376673f7374796c653d666c61742d737175617265266c6f676f3d706870)

🚀 Features
----------

[](#-features)

- **Full Canvas Control**: Move, scale, and rotate the main image and any added objects freely.
- **Background Operations**: Support for changing canvas background to transparent, solid colors, stunning gradients, or uploaded images.
- **Crop Tool**: Interactive visual cropping.
- **Drawing & Eraser**: Freehand drawing with adjustable brush size and colors.
- **Text & Typography**: Add rich text with custom typography (font family, size, colors, bold, italic).
- **Shapes & Stickers**: Insert rectangles, circles, triangles, arrows, and a rich library of pre-defined emojis/stickers.
- **Image Filters**: Apply various photo filters like Grayscale, Sepia, Vintage, Invert, along with sliders for Brightness, Contrast, Saturation, and Blur.
- **AI Integration Ready**: Built-in UI controls and loading states for AI background removal and image upscaling (AI processing logic must be provided by the host application's backend).
- **History Management**: Comprehensive Undo and Redo functionality.
- **Localization**: Out-of-the-box support for English, Arabic, and Turkish. Fully customizable via Laravel's translation system.

📦 Installation
--------------

[](#-installation)

This package is designed to be easily plugged into any Laravel 8+ project.

Require the package via Composer:

```
composer require nlk/image-editor
```

### Publishing Assets

[](#publishing-assets)

The package contains Blade components, Javascript files, and Translations. Publish them into your application using:

```
# Publish everything (JS, Views, Translations)
php artisan vendor:publish --provider="Nlk\ImageEditor\ImageEditorServiceProvider"

# OR publish specifically by tags:
php artisan vendor:publish --tag=nlk-image-editor-assets
php artisan vendor:publish --tag=nlk-image-editor-views
php artisan vendor:publish --tag=nlk-image-editor-lang
```

> **Note:** Don't forget to push the scripts stack in your main layout to render the package's javascript files correctly. The package pushes scripts to the `@push('js')` stack.

🧑‍💻 Usage
---------

[](#‍-usage)

### 1. Render the Editor Component

[](#1-render-the-editor-component)

Place the component tag anywhere in your blade view. This renders the hidden editor modal structure.

```

```

### 2. Configure JavaScript Environment

[](#2-configure-javascript-environment)

The editor relies on a global variable for identifying where to route AI processing requests (if you use them). Make sure you define it before the scripts are loaded:

```

    window.processImageUrl = "{{ route('your.ai.processing.route') }}";

```

### 3. Initialize the Widget (HTML Elements)

[](#3-initialize-the-widget-html-elements)

The package provides a helper `NLKImageWidget.initWidget()` to easily bind the editor to standard file inputs.

**Blade HTML example:**

```

Upload Image

    Edit Image

```

**JavaScript Initialization:**

```
document.addEventListener('DOMContentLoaded', function() {
    NLKImageWidget.initWidget({
        fileInputId: 'my_image_input',
        croppedInputId: 'my_image_cropped',
        previewImgId: 'my_image_preview_img',
        previewDivId: 'my_image_preview',
        editBtnId: 'my_edit_image_btn',
    });
});
```

### 4. Opening the Editor Manually (API)

[](#4-opening-the-editor-manually-api)

If you have a custom UI flow, you can invoke the editor manually by passing a Base64 string payload:

```
NLKImageEditor.open(currentBase64Image, function (editedBase64String) {
    // Callback executed when the user clicks 'Save' in the editor
    document.getElementById('my_image_cropped').value = editedBase64String;
    document.getElementById('my_image_preview_img').src = editedBase64String;
});
```

🧠 AI Endpoint Structure
-----------------------

[](#-ai-endpoint-structure)

If you wish to use the AI Background Remover and AI Upscaler UI buttons, your Laravel route (`window.processImageUrl`) should accept a `POST` request with the following JSON payload:

```
{
    "action": "remove_bg",  // or "upscale"
    "image": "data:image/png;base64,....." // Original image base64
}
```

And it must return a JSON response containing the processed base64 image:

```
{
    "success": true,
    "image": "data:image/png;base64,....."
}
```

🌐 Translations
--------------

[](#-translations)

Translations are located in `resources/lang/vendor/nlk/` after running `vendor:publish`. You can modify the translated strings for `en`, `ar`, and `tr` directly in your host application without altering the core package.

🛡️ License
----------

[](#️-license)

This package is open-source software built for NLKMenu frameworks.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance85

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

76d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b9bcae283075034ff6c0431b5ecfe2824f4bbb044e8b26e324b1882f9b0118b2?d=identicon)[mahmudabbas](/maintainers/mahmudabbas)

---

Top Contributors

[![mahmudabbas0](https://avatars.githubusercontent.com/u/155820403?v=4)](https://github.com/mahmudabbas0 "mahmudabbas0 (3 commits)")

### Embed Badge

![Health badge](/badges/nlk-image-editor/health.svg)

```
[![Health](https://phpackages.com/badges/nlk-image-editor/health.svg)](https://phpackages.com/packages/nlk-image-editor)
```

###  Alternatives

[creativeorange/gravatar

A Laravel Gravatar package for retrieving gravatar image URLs or checking the existance of an image.

5467.5M54](/packages/creativeorange-gravatar)[intervention/image-laravel

Laravel Integration of Intervention Image

1496.5M102](/packages/intervention-image-laravel)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

510496.0k23](/packages/bkwld-croppa)[ralphjsmit/laravel-glide

Auto-magically generate responsive images from static image files.

4719.6k5](/packages/ralphjsmit-laravel-glide)[spatie/laravel-og-image

Generate OG images for your Laravel app

305.2k](/packages/spatie-laravel-og-image)[nikkanetiya/laravel-color-palette

Laravel Wrapper for `ksubileau/color-thief-php`. Grabs the dominant color or a representative color palette from an image. Uses PHP and GD or Imagick.

3312.6k](/packages/nikkanetiya-laravel-color-palette)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)