Photo Editor – IMG.LY Blog

The Best Photo Editor SDKs: 2025 Ranking

Vatsala — Tue, 16 Sep 2025 07:52:46 GMT

In this guide, we’ll compare seven leading image editor SDKs - IMG.LY (CreativeEditor SDK), Fotor, Banuba, Pintura, Polotno, Imgpen, and Cloudinary, by focusing on each of their:

Features & capabilities
Implementation & use cases
Future-Proofing, support & pricing

At the end, we’ll give honest feedback on who would benefit the most from using these different tools and highlight where IMG.LY CreativeEditor SDK stands out as the most complete, enterprise-ready option.

1. IMG.LY CreativeEditor SDK (CE.SDK)

IMG.LY CreativeEditor SDK is an enterprise‑grade design and editing SDK that supports photo, video, and template workflows. It goes beyond simple photo adjustments to deliver a scalable editing tool that fits easily into products used by millions of end‑users.

Features & capabilities: CreativeEditor SDK offers a full suite of photo editing tools including filters, adjustments, cropping, and background removal, alongside advanced design capabilities. You can layer elements, apply templates, and use generative features to streamline creative workflows. CE.SDK offers complete content creation and personalization experiences.
Platforms & customization: Available for Web, iOS, Android, React Native, Flutter, Node.js, and Electron. The SDK is white-label and fully customizable. You control the entire UI and can extend functionality with plugins, making it suitable for teams that want both flexibility and enterprise stability.
Implementation & use cases: Integration is straightforward with ready-made UIs for image editing. Businesses use CE.SDK to power e-commerce personalization, marketing platforms, DAMs, SaaS tools, and social apps. A key differentiator of CE.SDK is a single engine that runs across platforms, ensuring consistent performance and reducing development overhead.
Future-Proofing, support & pricing: IMG.LY follows a clear AI-driven roadmap, with frequent feature releases and updates. Customers benefit from SLAs, dedicated onboarding, and solution engineers. Pricing is based on custom enterprise licensing, ensuring it aligns with your business needs.
Who its for: CE.SDK is perfect for companies looking for more than a basic photo editor. If you want a scalable solution that supports automation, cross-platform deployment, and advanced design features, CE.SDK is the strongest choice.

Key differentiator

CE.SDK is the only SDK that combines a polished, embeddable editor with a scalable automation engine in a single stack. This means you don’t need separate tools for editing and backend workflows. This integration saves development time, reduces costs, and ensures a smoother experience for end users. For teams building long-term products, this combination is a significant competitive advantage.

See the CreativeEditor SDK showcase for examples of its photo editing UI in action.

2. Fotor SDK

Fotor SDK is an AI-first editing API/SDK with a focus on automation. It provides ready-to-use AI endpoints that help teams handle common tasks like background removal and retouching without building their own machine learning models.

Features & capabilities: Fotor SDK focuses on AI-driven editing. It offers background removal, AI upscaling, skin retouching, magic eraser, and face unblur. The tools are strong for quick, one-off edits but limited in scope, mainly targeting simple editing tasks rather than broader workflows.
Platforms & customization: Primarily web-based with some mobile support through APIs. Customization is minimal compared to other UI SDKs since Fotor is focused on prebuilt AI endpoints.
Implementation & use cases: Setup is fast, but teams need to build their own UI for more complex workflows. Common use cases include e-commerce product photo cleanups and social integrations.
Future-proofing, support & pricing: Fotor invests heavily in AI features but is smaller in scale compared to enterprise-ready vendors. Commercial support is available, and pricing follows a tiered SaaS model.
Who it’s for: Fotor SDK is suitable for teams wanting fast AI editing without building in-house ML.

How it compares to IMG.LY

Fotor is best for narrow AI workflows, making it useful when you only need quick automation. IMG.LY, on the other hand, supports both automated editing and rich, customizable UIs in a single platform. This gives product teams the flexibility to deliver fast AI-powered edits while also providing a full-featured editor that can scale to enterprise needs. For businesses building long-term creative workflows, this combination ensures they don’t outgrow the tool as their product evolves.

3. Banuba Photo Editor SDK

Banuba Photo Editor SDK is a mobile‑first solution specialized in AR and beauty editing. It is widely used in apps where engaging face filters and real‑time effects are critical to user experience.

Features & capabilities: Banuba is designed for AR and beauty editing. It offers features like virtual makeup, skin smoothing, AR masks, and background replacement. This makes it particularly popular for apps where face editing and engagement features are key.
Platforms & customization: Banuba supports iOS, Android, React Native, and Flutter. Its modular SDK allows developers to mix and match features, but its focus is mobile-first.
Implementation & use cases: Banuba’s integration is fast for mobile apps, especially those in social media, UGC apps, beauty, and fashion e-commerce. However, support for web-based apps is quite limited.
Future-proofing, support & pricing: They are expanding their AR and AI stack, adding new features in line with industry trends. They offer enterprise agreements for larger customers, but pricing is high and not public, which can make it difficult for smaller teams to evaluate or plan budgets.
Who it’s for: Banuba is suitable for social media apps, beauty brands, and fashion retailers where AR features are essential to the product.

How it compares to IMG.LY

Banuba dominates in AR and beauty features, making it a strong choice for social or fashion apps. IMG.LY, however, is designed for enterprise use cases where scalability, cross‑platform consistency, and deeper workflow integration matter most. While Banuba is powerful for AR effects, IMG.LY combines editing, automation, and enterprise‑grade support, helping teams build creative products that can grow and adapt across both mobile and web platforms.

Learn more about how IMG.LY compares to Banuba here.

4. Pintura

Pintura is a JavaScript image editor SDK built specifically for the browser. It’s designed to be lightweight and developer-friendly, making it a good fit for teams that need straightforward image editing without enterprise-level complexity.

Features & capabilities: Pintura covers essential editing tasks such as cropping, rotating, resizing, and applying filters. It provides a clean editing interface that feels polished despite its narrower scope.
Platforms & customization: Works in the browser and supports vanilla JS, React, Vue and Angular. Developers can integrate it easily and customize the UI to fit their application’s look and feel.
Implementation & use cases: Setup is simple and quick, which makes it appealing for SaaS products and web apps that want to add photo editing features without heavy development. It’s commonly used for lightweight content creation and adjustments inside web platforms.
Future-proofing, support & pricing: Pintura is actively maintained, but its scope is intentionally limited. Support options are modest, reflecting the vendor’s smaller scale. Pricing is offered as a one-time license or annual subscription, which may suit smaller teams with predictable budgets.
Who it’s for: Developers who want a reliable, browser-native editor for web apps and don’t need advanced enterprise workflows.

How it compares to IMG.LY

Pintura is ideal for lightweight browser-native projects where simplicity matters most. IMG.LY, however, delivers an enterprise-grade SDK with broader capabilities, including automation, multi-platform support, and advanced customization. For teams that expect their product to scale or require editing as part of larger workflows, IMG.LY provides the flexibility and stability that Pintura doesn’t provide yet.

Find out more about how IMG.LY is a great alternative to Pintura here.

5. Polotno

Polotno is a JavaScript framework built for developers who want to create custom design and photo editors from the ground up. It offers a flexible canvas environment but shifts most of the responsibility for UI and workflow design onto the development team.

Features & capabilities: Supports canvas editing, text, shapes, and stock image integrations. Because it’s more of a toolkit than a finished editor, teams can tailor it in almost any direction, but they also need to do more work to reach a polished product.
Platforms & customization: Polotno runs on the web with JavaScript. It’s highly flexible, but developers must build their own UI and workflow, which increases development effort compared to ready-made SDKs.
Implementation & use cases: Polotno is best suited for prototyping, SaaS experiments, or internal tools where flexibility is more important than speed because creating a production-ready editor requires significant investment in development time.
Future-proofing, support & pricing: The tool is community-driven, which means it benefits from active developers but lacks the proven enterprise readiness of larger vendors. Support is limited to community forums, and pricing is through a commercial licence.
Who it’s for: Polento is best for developers who want full control and are willing to build editors from scratch rather than use a prebuilt solution.

How it compares to IMG.LY

Polotno gives you a foundation to build a custom editor, but leaves scalability, long-term support, and advanced workflows to your team. IMG.LY, on the other hand, delivers enterprise-grade stability, a rich feature set, and an AI-powered roadmap right out of the box.

For businesses that want to move quickly, reduce technical overhead, and rely on a proven partner, IMG.LY is the better choice.

Read our detailed guide on IMG.LY vs. Polotno to know more.

6. Imgpen

Imgpen is a lightweight, web-focused photo editing SDK built for simple integrations. It is aimed at small teams that need quick editing features without enterprise complexity.

Features & capabilities: Imgpen provides only basic image editing features like filters, cropping, text overlays, and simple effects. These features are useful for apps that want to give users quick editing options without overwhelming them, but they lack the depth required for more advanced creative workflows.
Platforms & customization: Imgpen runs on the web with JavaScript and offers minimal customization options. Teams can adjust the look and feel slightly, but the SDK doesn’t allow for deeper UI or workflow changes, which can limit how well it fits into complex applications.
Implementation & use cases: The SDK is easy to set up and lightweight, making it attractive for small SaaS apps, niche tools, or websites that need basic editing capabilities. It’s best suited for scenarios like adding a quick photo filter in a social widget or allowing simple image adjustments in a lightweight web app.
Future-proofing, support & pricing: The vendor’s roadmap is unclear, and the small team behind Imgpen means resources for updates or long-term support are limited. But their pricing is affordable, which makes it appealing for startups or teams on a budget.
Who it’s for: Teams with lightweight editing needs, small budgets, or projects where image editing is a side feature rather than a core part of the product.

How it compares to IMG.LY

Imgpen is budget‑friendly and covers the basics of photo editing, which may be useful for lightweight apps or early-stage projects.

However, if you’re looking for full‑scale deployments with advanced editing, automation, and enterprise‑grade support, IMGLY is the better option. For teams that want their product to evolve and scale, IMG.LY ensures they don’t hit limitations as their needs grow.

7. Cloudinary SDK

The last on the list is Cloudinary, which is best known as a media management and optimization platform that also provides an SDK for image editing. It focuses on performance and delivery, helping companies manage and serve large volumes of media efficiently.

Features & capabilities: For editing photos, Cloudinary offers features like cropping, resizing, optimization, filters, effects, and format conversion.
Platforms & customization: Cloudinary supports web, iOS, and Android. It is built around APIs, which give developers strong control over how media is processed and delivered. However, it does not include a ready-made editor interface for end users.
Implementation & use cases: Cloudinary is simple to integrate into media-heavy platforms that need to serve thousands of images quickly. It is often used by e-commerce sites, publishing platforms, and other services where fast delivery and optimized file sizes are essential.
Future-proofing, support & pricing: Cloudinary is a mature, established vendor with enterprise-grade support available globally. Pricing is usage-based, so your costs scale with the volume of media processed and delivered.
Who it’s for: Companies that want to focus on managing, delivering, and optimizing large media libraries rather than offering in-app image editing features.

How it compares to IMG.LY

Cloudinary excels in infrastructure and is a strong choice for optimizing and delivering media at scale.

However, it doesn’t provide an in‑app editing experience. IMG.LY combines those infrastructure capabilities with advanced editing and automation, giving teams both performance optimization and the creative tools their users expect. This makes IMG.LY a stronger option for teams building creative products that want to offer a complete creative workflow, not just media delivery.

Overview Table

Conclusion

Each SDK that we’ve listed here is unique and offers different features. The right choice between these tools depends on your product goals and customer expectations. Here’s a quick rundown:

Banuba: Best for AR and beauty use cases, particularly in social and fashion apps.
Fotor: Great for AI-powered quick edits where automation is the main priority.
Pintura, Polotno, Imgpen: Lightweight, developer-focused solutions that work for smaller projects or teams with specific, limited needs.
Cloudinary: Strong for media optimization and delivery when speed and performance are top concerns.

IMG.LY CreativeEditor SDK: The only SDK that unites polished editing UX with automation, cross-platform support, and enterprise stability. Read on to know more.

Why IMG.LY stands out?

Taken together, these comparisons show a clear pattern: most SDKs solve a narrow problem well, but few address the full range of editing, automation, and scalability requirements.

IMG.LY CreativeEditor SDK is built to do exactly that. It allows businesses to offer advanced photo editing directly in their apps, while also supporting automation and backend workflows on a single engine. This dual focus means your team doesn’t need to stitch together multiple solutions to achieve both creative flexibility and operational efficiency.

For product teams, this translates into faster time to market, less technical overhead, and the confidence that the editor will scale as user expectations grow.

If your goal is to build long-term, scalable creative tools, IMG.LY CreativeEditor SDK offers the most complete package and ensures your product can evolve without hitting limits. To learn more about how CreativeEditor SDK can support your business, get in touch with our team at IMG.LY, and we’ll be happy to guide you!

IMG.LY Announces Open Source JavaScript Library for In-Browser Background Removal

Jan — Wed, 28 Jun 2023 11:38:49 GMT

UPDATE October 2023: We’ve recently introduced Node.js support for the @imgly/background-removal npm package. This enhancement enables you to remove backgrounds from images not only in the user’s browser but also on your server. This opens up the potential for batch processing and allows you to bypass memory constraints, especially for larger images.

Just before the summer lull engulfs us all, we have something exciting to share! We are thrilled to announce the release of @imgly/background-removal, an innovative npm package that empowers developers to seamlessly remove backgrounds from images directly in the browser.

Gone are the days of relying on server-side processing or sacrificing data privacy. With IMG.LY’s Background Removal, you can now harness the power of in-browser background removal with ease. Let’s dive into the key features that make this library truly exceptional:

In-Browser Background Removal

Our one-of-a-kind solution performs the entire background removal process directly in the user’s browser, eliminating the need for additional server costs. By leveraging the computing power of the local device, users can enjoy a fast and efficient background removal process that streamlines their workflow.

Data Protection

Rest assured that your images and sensitive information remain secure within your own devices. As IMG.LY’s Background Removal runs entirely in the browser, there are no data transfers to external servers, ensuring robust data privacy and alleviating any concerns you may have.

You can experience it in action on our background removal showcase.

Seamless Integration with IMG.LY’s CE.SDK

IMG.LY’s Background Removal seamlessly integrates with IMG.LY’s CE.SDK, making it easier than ever to incorporate powerful in-browser image matting and background removal capabilities into your projects. Boost your creative endeavors with this intuitive integration.

The Neural Network (ONNX model) and WebAssembly (WASM) files used by IMG.LY’s Background Removal are hosted on UNPKG, making them readily available for download to all users of the library. However, if you prefer to host the data on your own servers, our library also supports custom asset serving. The choice is yours!

Background removal is often the first step in any creative workflow involving image composition. Whether you are developing e-commerce applications that need real-time background removal, enhancing user experience in image editing applications, or simplifying the creative process with web-based graphic design tools, IMG.LY’s Background Removal is your go-to solution.

Empower Yourself with IMG.LY’s Background Removal

Whether you are a professional developer or a hobbyist, this open source JavaScript library empowers you to deliver impressive applications and services with ease. Join the growing community of developers who are revolutionizing the way background removal is done.

Get started with @imgly/background-removal today by visiting our official npm package page and our GitHub repository. You’ll find comprehensive documentation, examples, and everything you need to unlock the full potential of in-browser background removal.

Update: Node.js Support

We have just shipped Node.js support for the @imgly/background-removal npm package. In addition to the users’ browser, you can now remove backgrounds from images on your server, making it possible to perform batch processing or bypass memory constraints for larger images.

Thank you for your support, and we can’t wait to see the incredible projects you’ll create with IMG.LY’s Background Removal. Stay tuned for more updates and enhancements as we continue to improve and expand this powerful library. Happy coding!

Don’t forget to subscribe to our newsletter to stay in the loop with the latest news and updates.

CE.SDK v1.7.0 Release and Roadmap

Malte — Mon, 08 Aug 2022 12:07:47 GMT

Today, we are thrilled to highlight the best new features and changes in CE.SDK since our v1.6.0 Release. We have also published our Product Roadmap for CE.SDK to share our vision and direction for upcoming releases. This roadmap will let you know ahead of time what features you can expect from us and accelerate your product planning and development. We are excited to hear your feedback and suggestions to build more powerful features for your application!

CE.SDK v1.7.0

This release includes:

Auto Close Option in Web UI Configuration for Asset Libraries
Custom URI Resolver
Improving Mobile Touch Support
Rotation of Groups and Hierarchies
Custom Asset Source UI
Disconnecting UI Variants from Roles
Asset Source ApplyAsset API
Blur API
Effects API
Image Fills API
Image Straighten API
Improved Group Selection and API
Scopes API
Shadows API
Zoom API

Auto Close Option in Web UI Configuration for Asset Libraries

There are no one-size-fits-all solutions for the behavior of asset library panels after an action was triggered. It depends on the use case and might vary between the panels and the available screen space. Thus, this is now configurable.

Custom URI Resolver

Custom URI Resolvers give you full control over how URIs should be resolved. You can create custom storage backends and even resolve different resolution images in different instances. Find more information in our documentation.

Improving Mobile Touch Support

Input handling was streamlined to handle both touch and mouse input efficiently. On touch devices, all handles maintain the recommended minimum size for touch input and are intelligently hidden to minimize overlap. Thanks to this mechanism, resizing and rotating are always a breeze.

Rotation of Groups and Hierarchies

The engine and user interface add options for rotating groups and design blocks with children. This allows changing the rotation of multiple elements at once quickly.

Custom Asset Source UI

Instead of fixed entry points such as “Images,” “Stickers,” or “Shapes,” we want to enable custom and flexible entry points. Until today, we tied them to a block type, which is currently only relevant when users add an asset to the scene.

Moving from Roles to Abilities: Disconnecting UI Variants from Roles

Before the change, the Advanced UI was tied to the creator role and the Default UI was tied to the Adopter Role. This is now no longer the case. The scopes and editing options are still controlled by the abilities of the current role.

Shadows in Advanced UI

With this update, we roll out the long-awaited ability to apply shadows to elements in our Advanced UI. Realistic drop shadow effects add more depth to your designs with a few clicks – no other editor is needed.

Blur API

We introduce new APIs to modify the blur for images and other blocks. This change allows programmatic access to add blur effects in automation cases and when building your own UI.

Effects API

We introduce new APIs to modify the effect stack for shapes and other blocks. This allows programmatic access to effects like adjustments, LUT filters, and many more.

Image Fills API

Currently, you can only access and use images with the image block. However, pages or vector shapes could use more than just a color or gradient fill. Therefore, we broaden the concept of fills by allowing every block to have an image fill, e.g., pages. This change will enable building a more natural photo- or video-editor experience. Documentation.

Image Straighten API

We are extending the Image Crop API to allow straightening, flipping, and rotating images during cropping. This change allows more fine-grained control.

Improved Group Selection and API

There are multiple options to select blocks inside a group:

selecting a group first and with each click select one block deeper in the hierarchy
selecting an element under the cursor directly, neglecting the hierarchy

Previously, we defaulted to different behaviors depending on the user’s role. Now, this is configurable and also customizable during runtime via APIs. Therefore, it’s up to the implementor how the selection should work.

Scopes API

We introduce new APIs to modify the scopes for blocks. This update allows programmatic access to change the scopes for users and allows control over the possible edits a user can make to a scene.

Shadows API

We introduce new APIs to modify shadows for images and other blocks. This change allows programmatic access to add shadow effects to be used in automation cases and when you build your UI.

Zoom API

We introduce new APIs to modify the current zoom level. This allows programmatic access to change the current zoom easily for automation use-cases or for building your own user interface.

Product Roadmap

As mentioned before, we are happy to publish our Product Roadmap to let you in on our new features and enhancements for CE.SDK. This way, we can elaborate our decisions and plans for the product and how you can benefit while allowing you to give us feedback and indicate the importance of particular features.
Now that you know what’s coming down the pike, you can prepare for the release of significant improvements and new features such as Video Support for Web or Native iOS Support well in advance.

CE.SDK v1.6.0 Release

Malte — Fri, 20 May 2022 09:21:48 GMT

Today, we are highlighting the best new features and changes in CE.SDK since our v1.5.0 Release six weeks ago. CE.SDK v1.6.0 is adding:

Linear Gradient Fills
Strokes, Outline, Insets, and Stroke Patterns
Blend Modes
Scale Groups, Multi-Selection, and Hierarchies
UI Template Library
Floating and Static Asset Library Panels
Placeholders API
Editing State APIs
API for Image Fit Modes

Linear Gradient Fills

With this update, we are introducing linear gradient fills. This feature creates a gradual blend between two colors, including transparency. Use the Color Picker to switch between solid color and linear gradient fill modes and determine the order of colors.

Strokes, Outline, Insets, and Stroke Patterns

This feature introduces strokes and stroke patterns. Strokes apply to any block, including images, text, and shapes. Use our APIs or UIs to set the stroke width, color, style, and more options affecting the stroke appearance.

Blend Modes

Blend modes are a popular feature in creative and image editing tools. They blend two blocks or layers to get different types of effects. This feature is available in both the API and the UI.

Scale Groups, Multi-Selection, and Hierarchies

Our engine and user interface now provide options to scale groups, multi-select and create design blocks with children. You can easily change the scaling of multiple elements at once. This also simplifies resizing and rescaling your template designs for other page and art board sizes.

UI Template Library

We are introducing the template library in all UIs. Allow users to switch between multiple templates while editing.

Floating and Static Asset Library Panels

For some screen sizes and use-cases, it might be tedious that the asset library floats over your canvas and covers your design. Therefore, you can now configure the asset library panel to be either floating or static. A static asset library won’t overlap with your design and adjusts to your screen size perfectly.

Placeholders API

CE.SDK 1.6 introduces an additional API that allows you to interact with all placeholders on the canvas. The API queries the number of placeholders in a template or document and lists all available placeholders in the current scene.

Editing State APIs

We extend the API to allow querying and modifying the current editing mode. That includes changing the on-canvas editing mode to Crop, Text, or others. You can also query the editor state for helpful information like the desired cursor type and rotation and the text cursor position. To observe these values more comfortably, an additional endpoint allows registering for callbacks whenever the editing state changes.

API for Image Fit Modes

The API now allows switching between fit modes for images:

Crop applies crop properties, and ignores the aspect ratio.
Cover resizes the image aspect-aware to fill the frame.
Contain allows resizing the image aspect-aware to fit into its frame.

PE.SDK and VE.SDK 10 for Android and 11 for iOS Release

Sascha — Wed, 04 May 2022 12:46:21 GMT

We are thrilled to announce the release of PhotoEditor SDK and VideoEditor SDK 10 for Android and 11 for iOS. This new major version is packed with features and improvements.

This release is adding:

Custom Watermarks
Background Removal for Photos
Background Removal for Stickers
Custom Sticker Libraries
Giphy Integration
And More Updates for Android and iOS

Custom Watermarks

With our new support for custom watermarks, you can add your company logo or any other image to photo and video exports. You can place your watermark in either corner or the center of your photo and video. Additionally, you can specify the size of the watermark and determine its distance from the outline if you choose to place it near a corner. Your users will not be able to remove nor modify the watermark.

For more details on Custom Watermarks, take a look at our documentation for Android or iOS.

Background Removal for Photos

You have unwaveringly requested this feature: we are excited to offer the automatic removal of backgrounds for static content! Background Removal is fully running on-device and currently specializes in images containing a person only. PE.SDK enables this feature exclusively when it detects a person in the photo.

The removed background will turn transparent if your selected output supports transparency, such as PNG. In other cases, such as JPG, your background removal will be tinted black.

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Photos with our Android guide or iOS guide.

Background Removal for Stickers

A more common use case for automatic background removal is with stickers, so we’ve also added this functionality. Select a sticker including a person and tap the Remove BG button. Simple!

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Stickers with our Android documentation or iOS documentation.

Custom Sticker Libraries

We wanted to make it easier for you to provide your users with more sticker tool content. So far, you were able to create multiple sticker categories with different stickers that could either be part of your app or stored on a server. Additionally, you could enable our personal stickers feature on iOS or Android), giving your users the option to select stickers from their camera roll.

We have now added more ways to provide your users with stickers.

Android

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary Fragment. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, all you have to do is pass it back to the SDK with a callback. Get started with your Custom Sticker Library with our Android documentation.

iOS

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary view controller that conforms to the StickerCollection protocol. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, simply pass it back to the SDK using a delegate method.
Additionally, we’ve created a new StickerProviderCategory that you can pass any object conforming to the StickerProvider protocol. This category provides most of the features required to interact with sticker content providers, such as search and pagination. You can use this category to very quickly integrate any sticker service.

Find more information on Custom Sticker Libraries in the iOS documentation.

GIPHY Integration

This online database and search engine for funny GIFs and beautiful animations is a staple in many social applications. Easily integrate GIPHY into your app:

Android

Using our new Custom Sticker Library, we’ve also created an integration for GIPHY on Android. All you have to do is head over to GIPHY, create your API key, pass it to your GiphySettings and create a GiphyStickerCategoryItem. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation on adding GIPHY for Android.

iOS

Using the new StickerProviderCategory, we added GIPHY support on iOS. All you have to do is head over to GIPHY, create your API key, and pass this to the GIPHY sticker category. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation here.

More Updates for Android

Additionally, we have:

Increased the minimum API level for PhotoEditor SDK from 16 (Android 4) to 21 (Android 5), which ensures support for 98% of all phones in use.
Added support for headless video exporting.
Increased video playback stability.
Fixed a number of issues with degraded audio quality in videos.
And added the ability to choose a theme at runtime.

More Updates for iOS

Additionally, we have:

Increased our deployment target from iOS 9 to iOS 13.
Migrated all usage of OpenGL to Metal.
Added a better result API.
Added support for SwiftUI.
Enhanced our video export to display a progress indicator and the option to cancel the export.

CE.SDK v1.5.0 Release

Daniel — Thu, 14 Apr 2022 12:53:45 GMT

Another six weeks have passed since our v1.4.0 release that brought an updated asset library and headless APIs. Since the initial CE.SDK release, we’ve been listening to your feedback and continuously releasing updates to improve and expand CE.SDK to better serve your needs. Here’s a short overview of what’s happened in the last quarter.

CE.SDK v1.5.0 is adding:

Hierarchies (Groups)
Template Imports & Exports
More Performance, More Power
High-Performance Rendering
Improved Touch Support
PDF Export
Subscription/Events API

Hierarchies (Groups)

With this release, we finally extended our flat hierarchy model to the typical parent-child relationship model between items on the canvas. That allows you to build an even more complex design: Group items to form a single unit and handle those items as one or control their opacity.

Template Imports & Exports

Export your template scenes as .scene-files that pack all assets that were used. You can also share your template by URL - all dependencies will resolve accordingly.

More Performance

We have replaced our underlying rendering engine with a new high-performance implementation, resulting in the performance of distinct scenarios improving by 100%. Likewise, as a result of polishing up various logic, CE.SDK runs faster than ever.

Improved Touch & Mobile Support

After evaluation, CE.SDK v1.5.0 expands upon our mobile advancement efforts by improving our web UI for touch inputs on mobile devices.

PDF Export

CE.SDK now supports PDF export. Vector paths and images are embedded, and rasterization will only be applied when necessary. Scenes of multiple pages can be exported as a multipage document.

Build Your Custom UI

We vastly improved support for building custom UIs on top of CE.SDK engine:

The CreativeEngine offers a powerful set of APIs to inspect, modify and interact with a scene.
A new set of UI-specific APIs, including history and zoom management, was added as a preview.

Events API

An Event API allows subscribing to scene changes and updates custom UI components accordingly.

Other

For an even smoother UI experience, we have improved the visual quality of element state indicators, and they now respect the element order.

How To Apply Image Filters in WebGL

Antonello — Fri, 08 Apr 2022 13:06:16 GMT

In this article, you will learn how to apply custom filters to an image in WebGL. You can achieve this goal without using any external library. That is because the HTML5 canvas element natively supports WebGL and does not require the use of plug-ins.

As we have already covered in previous articles, <canvas> is a powerful tool that equips you with everything required to manipulate images. This is true regardless of the use of WebGL. So, you can filter images also without using WebGL.

Now, let’s see how to filter images in Vanilla JavaScript with WebGL in your browser. Follow this step-by-step tutorial and learn how to build the following demo:

Getting Started with WebGL

If you are not familiar with WebGL, you need to learn a few things before approaching it. To build an application in WebGL, start with the following three concepts.

1. Textures

Keep in mind that to draw an image in WebGL you have to use a texture. To use a texture, WebGL requires you to define the texture coordinates. These coordinates go from 0.0 to 1.0, regardless of the texture size.

2. Vertex shader

The vertex shader is a function you have to write in GLSL that is in charge of computing the vertex positions. Thanks to it, WebGL can rasterize the draw primitives, which include points, lines, and triangles. When rasterizing these primitives, WebGL calls another user-defined function called fragment shader. In other words, WebGL interpolates the values provided in the vertex shader function while it draws each pixel using the fragment shader function execution.

3. Fragment shader

The fragment shader is a function you have to write in GLSL whose goal is to generate a color for each pixel of the draw primitive currently being drawn. This function has little info per pixel, but you can provide it with everything required by using the varyings variables. These allow you to pass values from the vertex shader function to the fragment shader function.

Filtering Images with Kernels in WebGL with `<canvas>`

There are many ways to filter images, but the most common one involves the convolution operation. This is because when used on images, convolution applies a filter by taking the weighted sum of a square of pixels and assigning the resulting value to the current pixel. This logic is applied to every pixel the image consists of. Therefore, you can now imagine why convolution is one of the most relevant concepts when it comes to image processing.

The coefficients used to perform the weighted sum come from a matrix called kernel. The kernel represents the filter you want to apply through the convolution operation. So, by changing the kernel, the resulting image will change accordingly. Some kernels are more useful than others and can be used for blurring, sharpening, performing edge detection, and other operations. You can find a list of the most popular kernels on Wikipedia.

Now, let’s see how to implement kernel image filtering in WebGL.

Clone the GitHub repository that supports this article with the following command:

git clone https://github.com/Tonel/how-to-filter-an-image-in-webgl-imgly

Additionally, try the demo application by launching how-to-filter-an-image-in-webgl-imgly/index.html in your browser.

Otherwise, you can find the JavaScript function taking care of implementing the filter logic in WebGL below:

function filterImage(canvas, originalImage, kernel) {
  // assuming the kernel is a square matrix
  const kernelSize = Math.sqrt(kernel.length);
  const gl = canvas.getContext('webgl');

  // clearing the canvas
  gl.clearColor(1, 1, 1, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const vertexShaderSource = `
  attribute vec2 position;
  varying vec2 v_coordinate;
  void main() {
    gl_Position = vec4(position, 0, 1);
    v_coordinate = gl_Position.xy * 0.5 + 0.5;
  }
`;

  const fragmentShaderSource = `
  precision mediump float;
  // the varible defined in the vertex shader above
  varying vec2 v_coordinate;
  uniform vec2 imageSize;
  uniform sampler2D u_texture;
  
  void main() {
    vec2 position = vec2(v_coordinate.x, 1.0 - v_coordinate.y);
    vec2 onePixel = vec2(1, 1) / imageSize;
    vec4 color = vec4(0);
    mat3 kernel = mat3(
      ${kernel.join(',')}
    );
    // implementing the convolution operation
    for(int i = 0; i < ${kernelSize}; i++) {
      for(int j = 0; j < ${kernelSize}; j++) {
        // retrieving the sample position pixel
        vec2 samplePosition = position + vec2(i - 1 , j - 1) * onePixel;
        // retrieving the sample color
        vec4 sampleColor = texture2D(u_texture, samplePosition);
        sampleColor *= kernel\[i\][j];
        color += sampleColor;
      }
    }
    color.a = 1.0;
    gl_FragColor = color;
 }
`;

  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  const fragmentShader = compileShader(
    gl,
    gl.FRAGMENT_SHADER,
    fragmentShaderSource
  );

  // iniziailing the program
  const program = createProgram(gl, vertexShader, fragmentShader);

  const positionAttributeLocation = gl.getAttribLocation(program, 'position');

  const imageSizeLocation = gl.getUniformLocation(program, 'imageSize');

  // binding the position buffer to positionBuffer
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // using the program defined above
  gl.useProgram(program);
  // enabling the texcoord attribute
  gl.enableVertexAttribArray(positionAttributeLocation);
  // setting up the size of the image
  gl.uniform2f(imageSizeLocation, canvas.width, canvas.height);
  // telling positionAttributeLocation how to retrieve data out of positionBuffer
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
  // provide the texture coordinates
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1, 1, -1, -1, 1]),
    gl.STATIC_DRAW
  );

  // loading the original image as a texture
  const texture = gl.createTexture();
  texture.image = new Image();

  // setting the anonymous mode
  // Learn more about it here:
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin
  texture.image.crossOrigin = '';
  texture.image.src = originalImage.src;
  texture.image.onload = function () {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    // setting the parameters to be able to render any image,
    // regardless of its size
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    // loading the original image as a texture
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      texture.image
    );
    gl.drawArrays(gl.TRIANGLES, 0, 6);
  };
}

function compileShader(gl, type, shaderSource) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);

  const outcome = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

  if (outcome === false) {
    // logging the error message on failure
    console.error(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
  }

  return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const outcome = gl.getProgramParameter(program, gl.LINK_STATUS);

  if (outcome === false) {
    // logging the error message on failure
    console.error(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
  }

  return program;
}

The filterImage() function is where the magic happens. It takes the following three parameters:

canvas: an Element object representing an HTML canvas element
originalImage: an Element object representing an HTML img element
kernel: an array containing the values of the kernel to use in the convolution operation

The first part of the function takes care of extracting the WebGLRenderingContext object representing a three-dimensional rendering context from the canvas element. Then, the vertex shader and fragment shader functions are defined as strings written in GLSL. Next, they are compiled and finally used to create a WebGL program.

The last part of the function creates a texture starting from the original image passed as a parameter and passes it to the WebGLRenderingContext to produce the final result. This represents the filtered image and is finally displayed by the browser in the canvas element.

The results produced by the filterImage() function depend on the kernel chosen, as you can verify by playing with the live demo you can find at the beginning of the article.

Et voilà! You just learned how to filter images in WebGL!

Final Considerations

As shown above, you can filter images with WebGL in Vanilla JavaScript with a hundred lines. At the same time, this cannot be considered an easy task to achieve. The reason is that getting into WebGL takes time and effort. Plus, you have to learn how to use GLSL to write the vertex shader and the fragment shader functions. So, things can get more complicated than expected.

Plus, you learned how to perform non-complex filters, but several filtering techniques are complex and do not involve the convolution operation. That also means that implementing them can be challenging and result in inefficient algorithms.

To avoid a headache, you should consider a complete and all-in-one solution like PhotoEditor SDK. Commercial solutions make things easier and shield you from all difficulties, offering features that would be complex, time-consuming, and challenging to implement. That is particularly true when it comes to using WebGL, which is PhotoEditor SDK’s main renderer.

You will be able to harness WebGL’s power without writing a single line of GLSL or knowing about its existence. WebGL will be used behind the scene for you! Keep also in mind that you would not be alone, since developers at IMG.LY are happy to provide support.

Filtering Images With PhotoEditor SDK

Read the article from the official documentation to learn how to get started with PhotoEditor SDK in HTML and Vanilla JavaScript. In detail, the Filters feature gives you more than 60 high-quality filters to play with. Achieve the following result with a few clicks:

Check out this feature on the PhotoEditor SDK demo page.

Conclusion

In this article, we looked at how to filter an image in WebGL with the HTML canvas element. Implementing a feature allowing users to filter images through a kernel-based approach in WebGL involves only a dozen of lines of code. However, understanding how WebGL works and coding in GLSL cannot be considered easy tasks.

As a result, you might want to avoid dealing with WebGL entirely. In this case, consider a commercial and easy-to-adopt solution using WebGL behind the scene – such as PhotoEditor SDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.‌

CE.SDK v1.4.0 Release

Daniel — Tue, 22 Feb 2022 12:34:56 GMT

Six weeks have passed since our last release, where we shipped our new and improved default UI, Placeholders, and a preview for our new Dashboard.

This time, we focused heavily on making content discovery and provisioning better for you and your customers, as well as automation and API-driven design. Our release includes:

Custom Asset Libraries & Management
Internationalization
Headless Mode & APIs
Other
Outlook on upcoming releases

Asset Libraries & Management

With this release, we improve our library system and overall usability. CE.SDK 1.4.0 introduces a new toolbar to let your users quickly access their favorite images, shapes, stickers, or text assets.

Even more importantly, we added a General Asset Source API that allows you to add any external library sources you like. This way, you can provide custom assets to your users, such as images, stickers, or anything else.
Check out our Documentation on Custom Asset Source Integration.

Internationalization (i18n)

CE.SDK now supports the easy translation of the default UI into any language, including full i18n support. We ship with English and German locales, but have successfully tested it with other languages.
Learn more about adding translations to CE.SDK in our Documentation.

Headless Mode & APIs

We are finally extending CE.SDK with a full headless mode that is usable without a user interface in a browser. You can use it to load, modify, and export scene templates programmatically without the need for any user interaction. Use it to create previews of your scenes with custom user content without opening the editor, or export your designs in multiple resolutions on demand.

Included APIs

Scene API lets you create, load, save, or export scenes to a rasterized image format.
Block API lets you create, read, update and delete any item (so-called blocks) in the scene; modifying properties like position, size, or content is guaranteed easy.
Layouts API lets you use advanced layout capabilities: choose from modes like absolute positioning, relative positioning in percent relative to the parent, or even auto layout. An even auto-layout lets you auto-adapt the size of a block according to its parent size and siblings.

Other

Snapping now works with multiple selected items.
Slider input values now allow manual input to give you more control.
Easy asset library access in the UI.
Changing content in Preview Mode to preview your template settings does not alter your template anymore.

Upcoming

We are currently working hard to improve the overall CE.SDK Editor experience for you and your customers. That includes adding features like strokes, gradients, grouping, but also improving the rendering performance to create more complex designs. Additionally, we are improving asset discovery within the editor.

Excitingly, we are working hard to bring our VE.SDK video features to CE.SDK! In the near future, you can use videos and animated GIFs inside any template and export short videos from within CE.SDK for Web.

How To Manipulate an Image With Jimp in React

Antonello — Wed, 26 Jan 2022 13:36:27 GMT

In this article, you will learn how to use jimp in React to perform the most common image processing operations. As you are about to learn, this popular JavaScript library allows you to effortlessly manipulate an image with a few lines of code.

What is Jimp?

Jimp stands for JavaScript Image Manipulation Program, and it is one of the most popular open-source image processing libraries, with more than one million weekly downloads. As stated on the official GitHub page, Jimp is a Promise-based library that relies entirely on Vanilla JavaScript. This means that it has no native or external dependencies, as you can verify here. This makes it more reliable and lightweight.

Jimp comes with several functions that allows you to transform your images in endless ways. Particularly, it includes the resize(), blur(), crop(), rotate() functions and many others. At the time of writing, these are image formats supported by Jimp:

Let’s now see how to use the Jimp transformation functions.

Prerequisites

This is the list of prerequisites you need to make the React applications using Jimp we are about to build works:

You can add jimp to your project’s dependencies by launching the following command:

npm install jimp

Now, you have everything required to start getting your hands dirty with Jimp in React.

Basic Image Processing in Jimp

All the Jimp usage examples presented below share the same logic. So, let’s address it immediately.

Specifically, this is what a basic JimpDemo component looks like:

import Jimp from 'jimp';
import { useEffect, useState } from 'react';

export function JimpDemo({ imageUrl }) {
  const [jimpImage, setJimpImage] = useState(undefined);
  const [image, setImage] = useState(undefined);
  const [transformedImage, setTransformedImage] = useState(undefined);

  // loading an image every time imageUrl changes
  useEffect(() => {
    const loadImage = async () => {
      // generating the Jimp data structure
      // loading an image from an URL
      const jimpImage = await Jimp.read(imageUrl);
      setJimpImage(jimpImage);

      // transforming jimpImage into its Base64 representation
      // and storing it
      const image = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
      setImage(image);
    };

    loadImage();
  }, [imageUrl]);

  // generating the transformed image
  // as soon as the Jimp data structure is ready
  useEffect(() => {
    if (jimpImage) {
      const transformImage = async () => {
        // performing the Jimp image processing operation
        // on jimpImage...

        // e.g. jimpImage.crop(100, 100)

        // storing the transformed image
        // in Base64 format
        const transformedImage = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
        setTransformedImage(transformedImage);
      };

      transformImage();
    }
  }, [jimpImage, height, width]);

  return image && jimpImage ? (
    <>
      <h1>Original Image</h1>
      <img className="originalImage" src={image} alt="Original" />
      <h1>Transformed Image</h1>
      <img
        className="transformedImage"
        src={transformedImage}
        alt="Transformed"
      />
    </>
  ) : (
    <>Loading...</>
  );
}

First, the imageUrl prop value storing the URL to the image you want to transform is used to generate a Jimp data structure. This happens in the first useEffect() function when launching Jimp.read(). This function takes the path to a file or a URL and returns a Promise with the Jimp data structure you call the manipulation functions on. Also, the Base64 representation of the original image is stored to be able to show it in the HTML <img> tag.

Keep in mind that the function passed to useEffect() should not be async. This is why an internal async function was defined and then called instead.

Then, the second useEffect() function is called as soon as jimpImage is initialized and takes care of performing the transformation function on the original image. Again, the Base64 representation of the transformed image is saved.

Finally, both the original and transformed images are rendered by the component. As you can imagine, what will change in the following examples will be the Jimp image transform function called, which might also require extra props.

Cropping an image

The Jimp crop() function crops an image at a given point to a given size.

jimpImage.crop(x, y, width, height)

x: the x coordinate to crop from
y: the y coordinate to crop from
width: the width of the crop region
height: the height of the crop region

See it in action in the live example below:

Resizing an image

The Jimp resize() function resizes an image to set width and height using a 2-pass bilinear algorithm.

jimpImage.resize(width, height);

width: the width to resize the image
height: the height to resize the image to

See it in action in the live example below:

Rotating an image

The Jimp rotate() function rotates an image clockwise by a number of degrees. Note that the width and height of the image will be resized accordingly by default.

jimpImage.rotate(degrees);

degrees: the number of degrees to rotate the image by

See it in action in the live example below:

Filtering an image

Although Jimp does not come with a single filtering function, it offers several functions to achieve the desired results. For example, you can implement an image filtering feature by harnessing the blur(), color(), dither(), normalize(), or threshold() functions.

Let’s see some of them in action in the live demo below:

Jimp vs PhotoEditor SDK

Undoubtedly, Jimp is a powerful tool. It’s an amazingly lightweight and simple library that offers so many image manipulations. On the other hand, achieving complex results requiring multiple manipulations to be performed on the end user’s needs could become challenging. In detail, this would require an advanced, robust, reliable, and easy-to-use UI that only a commercial solution such as IMG.LY’s PhotoEditor SDK can offer.

You could build such a UI yourself on top of Jimp, but this would take a lot of time and effort. This is especially true if you want to implement a general-purpose application, such as an image processing application. For limited and specific tasks without any user interaction, Jimp is the ideal solution.

Also, now you can take a look at the CreativeEditor SDK which is a more advanced API solution and obvious alternative to Jimp!

Conclusion

Today we learned about the jimp JavaScript library, its dependencies, how it works, and how to use it in React real-world scenarios. Specifically, this npm library comes with several image manipulation functions that can be used with a few lines of code. However, building a complex image editing application on top of it would require an entire UI, and you might want to avoid spending time on it. In this case, you should look into a more advanced, fully-featured, and ready-to-use solution – such as PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

CE.SDK v1.3.0 Release

Daniel — Mon, 17 Jan 2022 15:07:02 GMT

After another six weeks of work, we are happy to ship another update of our CreativeEditor SDK (CE.SDK). This release is again packed with great features to enhance the developer experience and user experience. It includes:

New improved Default UI
Lockable Design & Placeholders
SVG Assets
Multi Selection
Nudging (moving elements with arrow and shift key)
Create scenes from an Image.

New Improved Default UI

That is the first release to introduce a new UI type for CE.SDK, which we call Default UI. It comes with a slick interface and focuses on fast design adoption. The Default UI removes the need for inspectors for many editing cases, thus leaving your users undistracted and focused on adapting or creating designs.

Check our official documentation to learn about configuring the UI Elements.

Lockable Design & Placeholders

In the previous version, CE.SDK introduced the roles “creator” and “adopter” – differentiating between template creation and adoption. In creator mode, you have the liberty to create a design from scratch or change existing designs.

When creators are ready to share a design, they define which design elements can be changed when opening the editor in the “adopter” role. Typically, creators will allow adopters to exchange content, but also the options to style or arrange an item can be controlled.

When the editor is opened in the “adopter” role (Default UI), items that are allowed to change will be highlighted and images will be shown with an overlay indicating that the content shall be replaced before exporting or saving the design.

Find more information about placeholders and constraints in our official documentation.

Dashboard

Creating and adopting designs is one part, but organizing designs is another. With this release, we also introduced a dashboard to create and organize your designs for your users. Reach out to us if you want to see a demo of the dashboard in action and understand.

SVG Assets

With this version, we introduced SVG as an asset-type alternative to JPEG and PNG image formats. This has the benefit that standard SVG Stickers can just be used or uploaded in every design. This has the major advantage that stickers will be crisp at any resolution while coming with a very low download size. Reducing the server load and data transfer for you and your users. In this turn, we also replaced all our example stickers with their SVG equivalents.

Multi Selection

Positioning multiple items at once has been a pain before this release, but not anymore. With the new multi-selection interaction, users can select two or more items at once. Just hold down the “shift” modifier key and start selecting multiple items. Once selected, they can be moved around simultaneously.

Nudging

Always wanted to fine-tune your design and pixel-perfectly align your content?

You can now use the arrow keys (⬅️, ➡️, ⬆️ ⬇️) to nudge the selected items to their correct position pixel by pixel. You can also hold down shift to nudge even further.

Create Scene from Image

Before this release, the CE.SDK could either start from an empty or a predefined scene. From now on, there is also an option to start the editor with any image. It will auto-create a page with the size of the given image and insert the image into this one, allowing a more content-driven creation process. Learn how to create a scene from an image in our documentation.

Minor changes

Besides the major features, there are a ton of small improvements. These include:

UI interface to rename items and pages to a user-defined name
Ability to choose between two UI types, “default” and “advanced”
Searching in image libraries now uses i18n translations
Ability to change the UI Font.

Feel free to send us any questions, or let us know what you think on Twitter.

Thank you for your time!

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

How To Resize an Image With JavaScript

Antonello — Tue, 20 Jul 2021 09:22:31 GMT

In this article, you will learn how to resize an image in JavaScript, without using any external library. Thanks to the HTML <canvas> element, this is a reasonably easy task to accomplish.

Resizing an image has become increasingly important. That is because the quality of the images and their file sizes have been increasing for years.
For example, when letting users upload an image, you should always consider resizing it before uploading it. Uploading large photos is time-consuming and may cost money in bandwidth. As we have previously explained you might also want to compress such images. As you can imagine, both of these consequences fall on end-users – we want to avoid this.

Let’s see how to resize an image with Vanilla JavaScript. Follow this step-by-step tutorial to achieve the following result on CodeSandbox:

Resizing Images Using `<canvas>`

You can clone the GitHub repository that supports this article by launching the following command:

git clone https://github.com/Tonel/resize-image-javascript-imgly

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Implementing the Resizing Logic

While in a React context we used a library to do the heavy lifting for us, knowing the HTML [<canvas>](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) API is the only prerequisites for this approach. Although typically used for animation, game graphics, data visualization, and real-time video processing, you can also employ it as an image manipulation tool. Specifically, it provides everything required to resize an image. Let’s see how:

function resizeImage(imgToResize, resizingFactor = 0.5) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToResize.width;
  const originalHeight = imgToResize.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.drawImage(
    imgToResize,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  return canvas.toDataURL();
}

Initialize an in-memory <canvas> with a 2D rendering context for the drawing surface.
Set height and width depending on the size of the original image to resize and the resizing factor.
Then, the resized image is drawn according to the resizing factor passed by harnessing the drawImage() function.
Finally, the resized image is returned.

Et voilà! As you can see, resizing an image in Vanilla JavaScript takes only a few lines of code.

2. Resizing in Action

Now, it is time to see the resizeImage() function in action through a simple example.
index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Image Resizer</h1>
    <p>
      Please, upload an image and it will be shown both original and resized by
      50%
    </p>
    <input id="upload" type="file" accept="image/*" required />
    <div id="images">
      <h2>Original image</h2>
      <img id="imgToResize" />
      <h2>Resized image</h2>
      <img id="resizedImage" />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

src/index.js

// hiding the div that will contain the images
const imagesDiv = document.querySelector('#images');
imagesDiv.style.visibility = 'hidden';

const fileInput = document.querySelector('#upload');
fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;

  // displaying the uploaded image
  const imageToResize = document.querySelector('#imgToResize');
  imageToResize.src = await fileToDataUri(file);

  // resizing the image and displaying it
  const resizedImage = document.querySelector('#resizedImage');
  resizedImage.src = resizeImage(imageToResize, this);

  // making the div containing the image visible
  imagesDiv.style.visibility = 'visible';
});

function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}

function resizeImage(imgToResize, resizingFactor = 0.5) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToResize.width;
  const originalHeight = imgToResize.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.drawImage(
    imgToResize,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  return canvas.toDataURL();
}

The <input> element allows users to upload an image, then passed to the resizeImage() function. This is in charge of generating the resized image, which is finally shown below the original image. Please, note that this example is the same presented in the fiddle placed at the beginning of the article.

Final Considerations

Resizing an image in Vanilla JavaScript is definitely an easy task. No external libraries are required, and you can achieve your goal with just a few lines of code. This is great! On the other hand, every browser applies a different image interpolation algorithm behind the scenes. This leads to results depending on the user’s preferred browser. Not only might this be a problem in terms of consistency, but also a source of quality issues. Plus, such a simple task can turn into a nightmare if you wanted to implement a proper UI, allowing users to resize an image graphically.

In that case, a commercial and comprehensive solution like [PhotoEditorSDK](https://img.ly/products/photo-sdk) is a more beneficial approach. In fact, you should no longer have to worry about inconsistencies or quality issues. Moreover, with only one library, you get several tools to treat images without having to implement the application’s UI. Also, whenever you need help, you can ask for support from the IMG.LY developers who built the SDK.

Resizing an Image with PhotoEditor SDK

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in HTML and JavaScript. Then, by using the transform tool you can perform cropping, resizing, flipping, and rotation operations with just one feature. This way, you should be able to achieve the desired result:

Conclusion

In this article, we looked at how to resize an image with JavaScript. Resizing an image by using <canvas> is not a complex task, although this solution might introduce quality issues. As we have seen, you can resize an image effortlessly and with only a handful of lines of code. On the other hand, every browser applies a different resizing algorithm, leading to inconsistent results. For consistent and reliable results, you should take advantage of a more advanced and complete solution – such as PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

How To Crop an Image in React

Antonello — Mon, 28 Jun 2021 17:03:00 GMT

In this article, you will learn to crop an image in JavaScript. Specifically, you will see how to achieve this goal with the react-image-crop React library.

Over the last few years, providing users with features to deal with images has become more and more common. This is why every developer should know how to deal with basic operations on images, such as cropping. This gives them the possibility to choose only the areas they are interested in.

So, let’s see how to crop an image in React with react-image-crop. Follow this step-by-step tutorial to achieve the following result:

Prerequisites

This is the list of all the prerequisites for the demo application you are going to build:

Node.js and npm 5.2+ and higher
react-image-crop >= 8.6.12

Cropping an Image with `react-image-crop`

You can clone the GitHub repository that supports this article and try the demo application by launching the following commands:

git clone https://github.com/imgly/Blog-How-To-Crop-an-Image-in-React-with-React-Crop-Image.git
cd Blog-How-To-Crop-an-Image-in-React-with-React-Crop-Image
npm i
npm start

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Creating a React Project

The easiest way to create an empty working project in React is by using Create React App, the officially supported way to create single-page React applications. You can create a new project called react-image-cropper-demo with the following command:

npx create-react-app react-image-cropper-demo

You will now have a demo project located in the react-image-cropper-demo folder with this file structure:

react-image-cropper-demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Move into the react-image-cropper-demo folder and launch a local server by running:

cd react-image-cropper-demo
npm start

Visit http://localhost:3000/ in your browser, and you should be able to see the default Create React App screen.

2. Installing `react-image-crop`

Add the react-image-crop library to your project’s dependencies by running the following command:

npm install --save react-image-crop

Your package.json file will be updated accordingly, and you should now be able to see react-image-crop as a dependency.
Now, you have everything required to start developing your image cropper component.

3. Building the Image Cropper Component

First of all, create a components folder inside src. Then, make an ImageCropper folder containing index.js and index.css. These two files will contain the cropper component definition and style respectively.

Initialize index.js with the following lines of code:

import React from 'react';

function ImageCropper() {
  return <div>{/*TODO*/}</div>;
}

export default ImageCropper;

This way, you have just created an empty ImageCropper component.
Now, you need to import ReactCrop, which is part of the react-image-crop library. Add it to the ImageCropper imports:

import ReactCrop from 'react-image-crop';

Plus, do not forget to import dist/ReactCrop.css or ReactCrop.scss as follows:

import 'react-image-crop/dist/ReactCrop.css';
// or scss:
import 'react-image-crop/lib/ReactCrop.scss';

This is what the final ImageCropper will look like:

import React, { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import demoImage from './demo-image.jpg';

function ImageCropper(props) {
  const { imageToCrop, onImageCropped } = props;

  const [cropConfig, setCropConfig] = useState(
    // default crop config
    {
      unit: '%',
      width: 30,
      aspect: 16 / 9,
    }
  );

  const [imageRef, setImageRef] = useState();

  async function cropImage(crop) {
    if (imageRef && crop.width && crop.height) {
      const croppedImage = await getCroppedImage(
        imageRef,
        crop,
        'croppedImage.jpeg' // destination filename
      );

      // calling the props function to expose
      // croppedImage to the parent component
      onImageCropped(croppedImage);
    }
  }

  function getCroppedImage(sourceImage, cropConfig, fileName) {
    // creating the cropped image from the source image
    const canvas = document.createElement('canvas');
    const scaleX = sourceImage.naturalWidth / sourceImage.width;
    const scaleY = sourceImage.naturalHeight / sourceImage.height;
    canvas.width = cropConfig.width;
    canvas.height = cropConfig.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      sourceImage,
      cropConfig.x * scaleX,
      cropConfig.y * scaleY,
      cropConfig.width * scaleX,
      cropConfig.height * scaleY,
      0,
      0,
      cropConfig.width,
      cropConfig.height
    );

    return new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        // returning an error
        if (!blob) {
          reject(new Error('Canvas is empty'));
          return;
        }

        blob.name = fileName;
        // creating a Object URL representing the Blob object given
        const croppedImageUrl = window.URL.createObjectURL(blob);

        resolve(croppedImageUrl);
      }, 'image/jpeg');
    });
  }

  return (
    <ReactCrop
      src={imageToCrop || demoImage}
      crop={cropConfig}
      ruleOfThirds
      onImageLoaded={(imageRef) => setImageRef(imageRef)}
      onComplete={(cropConfig) => cropImage(cropConfig)}
      onChange={(cropConfig) => setCropConfig(cropConfig)}
      crossorigin="anonymous" // to avoid CORS-related problems
    />
  );
}

ImageCropper.defaultProps = {
  onImageCropped: () => {},
};

export default ImageCropper;

imageToCrop is the source image received from the props. The or statement used when assigning the ReactCrop’s src props assures that either imageToCrop or a default demo image is shown. After being loaded, a reference to the image is saved and then used when performing the cropping operation. Then, whenever a user uses the component to try to crop an image, the cropConfig object containing the crop settings is updated accordingly. Finally, when the user stops selecting the area to crop, cropImage is called. This function is in charge of producing the cropped image and passing it to the onImageCropped function received from the props.

4. Putting It All Together

Now it is time to see the ImageCropper component in action. All you need to do, is change the App.js file as follows:

import React, { useState } from 'react';
import './App.css';
import ImageCropper from './components/ImageCropper';

function App() {
  const [imageToCrop, setImageToCrop] = useState(undefined);
  const [croppedImage, setCroppedImage] = useState(undefined);

  const onUploadFile = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      const reader = new FileReader();

      reader.addEventListener('load', () => setImageToCrop(reader.result));

      reader.readAsDataURL(event.target.files[0]);
    }
  };

  return (
    <div className="app">
      <input type="file" accept="image/*" onChange={onUploadFile} />
      <div>
        <ImageCropper
          imageToCrop={imageToCrop}
          onImageCropped={(croppedImage) => setCroppedImage(croppedImage)}
        />
      </div>
      {croppedImage && (
        <div>
          <h2>Cropped Image</h2>
          <img alt="Cropped Image" src={croppedImage} />
        </div>
      )}
    </div>
  );
}

export default App;

The input element allows users to upload an image, then stored it in imageToCrop and passed to ImageCropper. Each time a user crops it, the resulting image is saved thanks to the setCroppedImage function. Then, it is finally displayed in the Cropped Image section as presented in the fiddle at the beginning of the article.

Final Considerations on `react-image-crop`

Cropping an image from scratch is not an easy task. This is why using a library like react-image-crop is the recommended approach. As you have just seen, you can achieve your goal with just a few lines of code. This is great! On the other hand, these libraries are designed to achieve specific goals, like cropping an image. What if you need to perform or get users the possibility to do other image-related operations? You may be ending up with as many libraries as operations required.

Not only might they have very different UIs, but it may also be complicated to integrate them all in the same project. This is why in such a circumstance, a commercial and wider solution like PhotoEditorSDK should be the preferred approach. In fact, with only one library you get several tools to treat images as you want, while preserving the consistency of your application’s UI. Also, whenever you need help, you can ask for support from the img.ly developers who built the SDK or visit one of the myriad snappy integration guides written by the developers on the blog.

Cropping an Image with PhotoEditorSDK

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in React. Then, by using the transform tool you can perform cropping, resizing, flipping, and rotation operations with just one feature. This way, you should be able to achieve the desired result:

Conclusion

In this article, we looked at how to crop an image in React. Cropping an image can turn into a complex task and this is using a library should be the preferred approach. In particular, react-image-crop allows you to crop an image easily and with only a handful of lines of code, as we have seen. On the other hand, it is a library with a very specific purpose. So, if you needed to perform more than one operation on your images, you might need a more advanced and complete solution like PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

Flutter: Our new plugins made for Dart developers

Leon — Thu, 11 Mar 2021 14:12:09 GMT

Flutter enables developers to build native iOS and Android applications with a single Dart codebase whilst the application’s performance is kept at a very high native-like level. This is even more ensured by the huge amount of Flutter plugins, which wrap native code for the use in Dart.

With the rising demand for photo and video editing solutions, we were committed to provide plugins that enable developers to use our native PhotoEditor SDK and our native VideoEditor SDK within their Flutter applications. This said we are proud to announce that the Flutter plugins photo_editor_sdk and video_editor_sdk are now extending our list of cross-platform modules. The combination of both products allows you to add comprehensive image and video editing tools to your Flutter application for iOS and Android - within minutes.

Usage

While building the plugins, we focused on making the use and integration of our existing SDKs as easy as possible and minimizing the required platform-specific knowledge and skillset. Therefore, using the plugins is as easy as writing a single line of Dart code:

Customization

Furthermore, we wanted to keep the high level of customization options like cropping or resizing that our customers are used to in our products. In this sense, we created a dedicated Configuration Dart class which serves the option to customize the SDK to your needs without ever leaving the Flutter world.
Using the configuration is fast and easy:

Where to go from here?

Feel free to explore our packages, usage examples as well as the API documentation on pub.dev and/ or GitHub.
We released our new Flutter plugins under open-source licenses, so feedback and pull requests are welcome.

Cordova: A plugin made for JavaScript developers

Hasan — Wed, 09 Sep 2020 10:59:07 GMT

In a perfect world, Cordova should enable web developers to target multiple platforms with one codebase. Yet in reality, developers using Cordova to build cross-platform apps, need to be experienced with the development tool stacks and programming languages of the native platforms. This is particularly the case when integrating native third-party libraries from scratch, as we detailed in a previous blog post.

We are proud to introduce our all-new Cordova plugin integrations [cordova-plugin-photoeditorsdk](https://www.npmjs.com/package/cordova-plugin-photoeditorsdk) and [cordova-plugin-videoeditorsdk](https://www.npmjs.com/package/cordova-plugin-videoeditorsdk) for our native PhotoEditor SDK and VideoEditor SDK versions. The interplay of both products allows you to add comprehensive image and video editing tools to your Cordova app for iOS and Android - within minutes.

While crafting our new plugins, the primary objective was to minimize the required platform-specific knowledge and skillset. We are thrilled to provide a wealth of configuration and customization options to developers without forcing them to leave their JavaScript tooling and programming environment.

Bye-bye native platform-specific asset management

Our new utility function loadResource() simplifies the process to pass static assets to the native SDKs. By using it, e.g., in your index.js file, our plugins will take care of resolving the correct platform-specific asset file paths.

The following snippet demonstrates this convenience for customizing the sticker tool (lines 15 to 30) and for passing an input image to the editor (line 33). The only requirement is to make the corresponding images available in your app’s www/assets folder.

Further examples

We created a separate repository each for our photo editor example project and video editor example project to prevent our sample assets from unnecessarily increasing the size of your node_modules folder when installing our plugins.

Ionic

Ionic is built on Cordova, so you’re able to use the plugin for your Ionic application as well. Just take a look at our repositories for our photo editor example project and video editor example project, to get started with integrating our SDKs with your Ionic app.

Announcing PhotoEditor SDK HTML5–v 5.0

Priyanka — Thu, 16 Apr 2020 12:00:00 GMT

Meet PhotoEditor SDK 5.0

Last year we decided to meticulously rebuild the PhotoEditor SDK HTML5 from stem to stem. There’s a saying that great software is constantly evolving for the better. PhotoEditor SDK 5 does just that, it is now **smaller**, **faster and easily** **maintainable.**

Rethinking UI Design for a Better User Experience

The User Interface (UI) of the PhotoEditor SDK is visually and conceptually revised taking specific usability and platform guidelines into account. This has resulted in an even more consistent and intuitive UI than before.

In the course of refactoring, we have standardized the UI structure and arrangement of the individual tools. The UI controls are now displayed according to their context to create a minimalist, clear, and appealing overall image. Find more information on the design improvements here.

Let’s talk metrics

The average TTI (Time to interactive) changed from 96.8s to 5.5s

That makes it “fast enough” on mobile networks

These massive speed gains were mainly enabled by our major rewrite and re-architecting of the codebase. Since it has been untouched for years, we have now reconstructed it completely focusing on performance and scalability.

Configurations and Customizations

UI is now supercharged with even more customization options.

Layouts

We will be supporting two UIs as before, but we are now moving away from the terminology Desktop UI and React UI. Instead, they are now called Advanced UI and Basic UI, sharing one and the same code base.

Themes

Light theme was one of the most sought out features for the PhotoEditor SDK HTML5. The UI can now be integrated even better into existing systems, thus transitioning seamlessly from the PhotoEditor UI to the rest of the UI. End users are offered an improved holistic experience. With the major version, dark and light themes are supported by default. Moreover, themes can be customized on three levels colors, typography, and shape. More on that here.

Component Customization

This has to be the most exciting feature for the major release. You could simply provide a React Component in the configuration and it will be rendered instead of PhotoEditor SDK HTML5 built-in Component. This can help you transform the UI to match the design style of your application. More on that here.

And More

This is just the tip of the iceberg. This release includes numerous user experience and performance improvements. Moreover, PhotoEditor SDK supports differential serving i.e., we **serve** different bundles to different browsers, and provides typings.

Deprecations and Breaking Changes

If you’ve read the post up until to this point, you should be able to notice that there will be breaking changes. Although we have tried to minimize the number of breaking changes and make it backward compatible as much as possible, we believe that some breaking changes in the configuration will be required.

Hitherto we supported two rendering engines for PhotoEditor SDK UI i.e., WebGL and Canvas. Considering browser support we will here-forth be supporting only WebGL.

You can find out more about the release, try out some demos, check our migration guide, or simply get started here.

We’re looking forward to exploring the new capabilities the PhotoEditor SDK V5 starts to unravel, and we’re excited to continue pushing the boundaries of what’s possible in UI libraries and sharing it with you.

Ask us anything here.

PS: Yes, most of the images used in the blog post are edited using the PhotoEditor SDK, #That’sSoMeta

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

How to recreate Snapchat’s UI within a single day with the PhotoEditor SDK for Android

Niklas — Sun, 18 Feb 2018 23:00:00 GMT

Is it possible to completely rejig the UI of the PhotoEditor SDK within a day? Principally, everything is possible, however, for me as a prospective Java developer this whole undertaking seemed rather tough at first. The task at hand was to rebuild the SDK’s UI to match popular apps like Snapchat or Instagram Stories in only a few steps. A few weeks ago, we already did something similar with the iOS SDK, however, as there are some differences between the platforms the whole process had to be repeated for Android.

As my colleague Malte Baumann already pointed out in his blog post, the main idea behind this endeavor is to explore the possibilities and limitations of the SDK’s customizable UI. But above that, it is also a great way of making oneself familiar with the SDK’s architecture and functionalities. Below, I’m going to explain some of the technical aspects as well as the setup of the story UI in a little more detail.

The Architecture

The interface is composed of several layers. The first layer is the EditorRootView that contains all other views and is, therefore, their parent object. Beneath that lies the EditorPreview that is responsible for the display of the selected image. Following comes the BrushLayer that can be drawn upon. In this specific layer array, the brush cannot be placed in front of a sticker. The stickers, however, are all generated in dedicated layers which makes it easy to adjust their order. Once selected, a sticker will automatically be brought to the front. The UI elements can be switched visible and invisible at will; they lie at the very top so that no sticker can cover them.

At the heart of the UI lies the StateHandler that functions as the communication interface with the SDK. The StateHandler includes the EditorShowState and the HistoryState. The HistoryState allows for the retrieval of methods that are necessary for the function of the “undo” button. For example, every new brush stroke adds a new memory state that can be retrieved by the HistoryState and hence reversed. The EditorShowState manages the EditMode that allows for the activation of the different SDK tools. To draw with the brush tool, the EditMode simply has to be set to brush. Color and stroke width are then controlled by the BrushLayerSettings.

There is a dedicated button to add emojis that displays a RecyclerView filled with every sticker available in the config upon press. Once a sticker is selected a new layer with matching StickerLayerSettings is added to the image.

Although text is realized as a sticker as well within the SDK, it is a little more complicated to generate a text sticker as the required TextStickerConfig has to be generated first. The text tool can create text stickers through keyboard entries. The text and background color, as well as the text alignment, can be adjusted separately. Those functions can be controlled via different buttons. However, as the SDK has no canned methods for these operations, I had to write widgets that control the buttons. The different button states are interpreted and executed in the TextPanel.

To export an image, you simply have to launch the saveImage method.

The Result

Thanks to the documentation, the execution of the UI revamp was pretty straightforward even without previous knowledge or source code access. As main functionalities like the brush tool or the undo function are already built into the SDK, it was a manageable task to integrate those into the new UI. Against that, the styling of the SeekBar that is needed to adjust the brush size was a little more time-consuming.

The design was mainly realized through layouts with fairly simple code. Even though there were some minor hurdles to overcome, the allotted time of a working day should be adequate for a more experienced developer.

You can find the code for this example UI in our repository.

Thanks to Felix Rau and Malte Baumann!

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

PhotoEditor SDK + React Native

Malte — Mon, 20 Mar 2017 00:00:00 GMT

Often our users ask whether it’s possible to use the PhotoEditor SDK for iOS and Android with React Native (the good news right away: Yes, it is possible and fairly easy as well). So, we set out to create a demo app and put together a guide on how to easily set up the PhotoEditor SDK with React Native and how to avoid eventual pitfalls.

Setup

We started our demo project by creating a new React Native project using react-native init PESDKDemo. We then added react-native-navigation, a navigation library from the awesome folks at Wix, to get a base for our demo app. However, react-native-navigation is not required for embedding the PESDK into your React Native application.

Launching the PhotoEditor SDK from React Native

To successfully launch our editor from React Native we needed to do three things:

Add the PESDK library to our iOS project.
Create a native module that bridges between React Native and the PhotoEditor SDK.
Add a method to create a ToolbarController, push a PhotoEditController and present them from the current view controller.
Call the method, wherever we want to edit an image in our React Native code

The first step was rather easy. We just followed the steps for a manual installation and had the PESDK library ready in minutes.

Creating a native module in React Native was fairly easy as well. We simply created PESDKModule.h and PESDKModule.m and defined a PESDKModule class that inherits from NSObject and implements the RCTBridgeModule protocol. In the classes implementation we registered our module with React Native by calling RCT_EXPORT_MODULE(PESDK):

In order to create a new photo editor view controller we needed to create a new ToolbarController and push a PhotoEditController that loads a sample image. As we’ll always use such a hierarchy, we bundled this setup into the present() method of our native module and exported it to React Native using the RCT_EXPORT_METHOD macro:

The final step was putting our newly created module to good use and actually pushing our photo editor from React Native. To do so, we imported the PESDK native module using var PESDK = NativeModules.PESDK. We could then call PESDK.present() and the native module created the ToolbarController and PhotoEditViewController objects and pushed them from the current view controller. If you were to use a simple TouchableHighlight, this could look like this:

Bringing it all together, we were now able to open the native iOS PESDK PhotoEditController from our React Native code. Surprisingly easy, isn’t it?

Passing an image to the editor

Opening an image editor with a sample image is nice but wasn’t really our intention, when we started integrating the PhotoEditor SDK. Instead, we wanted to be able to edit any image and save the result into our camera roll or share it with our friends. For our little demo, we decided to present a grid of images from unsplash.com to the user, so he can choose any image from the list and edit it with our editor.

The JavaScript for creating the image grid is a little out of scope for this article, so we won’t cover it in detail. It basically uses a ListView to create rows of three cells and fills them with images loaded from the unsplash.it service. All image fetching, scrolling, etc. is handled by React Native, so we only needed to handle the user’s taps on an image:

We used [react-native-fs](https://github.com/itinance/react-native-fs) to download a larger resolution image to the local filesystem, pass the path of the local file to our present() call and modify our iOS native module:

We then had a nice little app, that shows a grid of images, loads a high-resolution image upon selection and opens the PhotoEditor SDK:

Android implementation

As we have seen, opening the PESDK from React Native can easily be done on iOS. But why use React Native, if the app only runs on iOS? It was time to add Android support to our little demo app. To accomplish this we needed to repeat some of the previous steps for Android:

Add the PESDK to our Android project.
Create a native module that bridges between React Native and the PESDK.
Add a method to launch an ImglyIntent using the PhotoEditorBuilder from the current Activity.

Installing the SDK is again done by following the instructions for integrating the PESDK and shouldn’t take more than a few minutes. Creating a native module on Android is quite similar to iOS, although a little more setup code is required: We created our PESDKModule that recreates the present(path)method from iOS, a PESDKPackage containing our module and finally added the package to our Application:

This time, we prepared the desired settings for our editor, added our image path and passed everything to a PhotoEditorBuilder. The builder creates an intent and we launch it from our current Activity. That’s it! Running our sample app on an Android device now leads to this:

Nifty details

Experimenting with our new app, we noticed an issue: While the Android app closed the editor just fine when canceling the editor, the iOS app did nothing at all. That is because the iOS module doesn’t handle the PESDKs delegate methods. However, this can be fixed easily:

It could be taken even further by turning our native iOS module into a RCTEventEmitter and sending events to React Native when the delegate methods are called. Just take a look into our GitHub repository to find the corresponding code.

Summary

To sum it up: Using the PhotoEditor SDK from React Native was rather easy to do and we were very happy with the results. Handling the data flows between React Native and the Java or Objective-C classes can be tricky, but when dealing with a specific use case, it should be easy to adjust the native modules to meet your requirements. Feel free to adapt our code and add the PhotoEditor SDK to your React Native app. We’re looking forward to your feedback and any pull requests, that further optimize our implementation.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Photo Editor – IMG.LY Blog

The Best Photo Editor SDKs: 2025 Ranking

1. IMG.LY CreativeEditor SDK (CE.SDK)

Key differentiator

2. Fotor SDK

How it compares to IMG.LY

3. Banuba Photo Editor SDK

How it compares to IMG.LY

4. Pintura

How it compares to IMG.LY

5. Polotno

How it compares to IMG.LY

6. Imgpen

How it compares to IMG.LY

7. Cloudinary SDK

How it compares to IMG.LY

Overview Table

Conclusion

Why IMG.LY stands out?

IMG.LY Announces Open Source JavaScript Library for In-Browser Background Removal

In-Browser Background Removal

Data Protection

Seamless Integration with IMG.LY’s CE.SDK

Empower Yourself with IMG.LY’s Background Removal

Update: Node.js Support

CE.SDK v1.7.0 Release and Roadmap

CE.SDK v1.7.0

Auto Close Option in Web UI Configuration for Asset Libraries

Custom URI Resolver

Improving Mobile Touch Support

Rotation of Groups and Hierarchies

Custom Asset Source UI

Moving from Roles to Abilities: Disconnecting UI Variants from Roles

Shadows in Advanced UI

Blur API

Effects API

Image Fills API

Image Straighten API

Improved Group Selection and API

Scopes API

Shadows API

Zoom API

Product Roadmap

Thanks for reading! Let us know what you think on Twitter! To stay in the loop, subscribe to our Newsletter.

CE.SDK v1.6.0 Release

Linear Gradient Fills

Strokes, Outline, Insets, and Stroke Patterns

Blend Modes

Scale Groups, Multi-Selection, and Hierarchies

UI Template Library

Floating and Static Asset Library Panels

Placeholders API

Editing State APIs

API for Image Fit Modes

Thanks for reading! Let us know what you think on Twitter, or stay in the loop with our Newsletter.

PE.SDK and VE.SDK 10 for Android and 11 for iOS Release

Custom Watermarks

Background Removal for Photos

Background Removal for Stickers

Custom Sticker Libraries

Android

iOS

GIPHY Integration

Android

iOS

More Updates for Android

More Updates for iOS

Thanks for reading! Let us know what you think on Twitter, or stay in the loop with our Newsletter.

CE.SDK v1.5.0 Release

Hierarchies (Groups)

Template Imports & Exports

More Performance

Improved Touch & Mobile Support

PDF Export

Build Your Custom UI

Events API

Other

Thanks for reading! To stay in the loop with our latest articles and releases, subscribe to our Newsletter.

How To Apply Image Filters in WebGL

Getting Started with WebGL

Filtering Images with Kernels in WebGL with `<canvas>`

Resizing Images Using `<canvas>`

Cropping an Image with `react-image-crop`

2. Installing `react-image-crop`

Final Considerations on `react-image-crop`