image-editor

I’m a web developer for more than 10 years now, and I know how hard it would be to work on more serious projects without using third-party libraries. This is why I love them so much, and in this article, I’m going to share one of my recent findings. A gem that I deem very helpful for profile photos on a website such as a forum or LMS (learning management system), although this plugin is so much more. It’s a paid JS plugin, but for a very good reason. Let’s see how we can save a ton of time in the development process by using this neat image editor, compatible with most of the development stacks out there. What is Pintura? Pintura is an image editing tool, packed with so many great features that I don’t know where to start first. In fact, the scope of this article simply can’t hold the number of possibilities that this plugin provides, so I’ll try focusing briefly on the main features and showing some quick examples. In a nutshell, Pintura is a robust JS image editor, allowing you to crop, resize, rotate, apply filters, or fine-tune your images. Pintura also supports annotation, stickers (including custom ones), removal of sensitive information from the photos (such as location), enforced crop ratio, and others. It is responsive and works on both desktops and mobiles, very lightweight and fast to use. And while you as a website owner can use it for your own website or project, this tool is perfect for developers. Yes, this library is self-sufficient and can be used on your website as an image editor (check this website for example), but the real power comes in accessibility for developers and the support for a wide range of development platforms. Should you try Pintura for your own project? While I always encourage fellow devs to shake their heads and make the best of any tool they are trying to build, certain things are best when implemented. I mean, if you want to build your own image editor tool, you can do that, but it can take months, especially if you need more than 1-2 features that Pintura provides. Plus, you need to test on different devices and cover a wide range of use cases, which basically takes a solid team and a solid amount of time. But what if you’re a solo rider? Or if your team is working on a large-scale project, yet you want or need to make it better when it comes to image processing? This is where Pintura comes in really handy. The pool of use cases is rather deep, but you can think of it like this: When you need a photo fitting certain criteria in your project, Pintura makes it effortless. Profile photos in a certain size or ratio, filtered and styled featured images, equal images for slides, galleries, or carousels, and a website where you can strip all the privacy information from a photo… are just some of the many possibilities. So, although someone with no coding experience can use it, Pintura shows real strength when used by developers. It saves time and provides an elegant solution for image editing on the fly, whether automatically in the code or by allowing website users to fulfill a certain requirement or just make their photos more appealing! We will cover the usage basics in the next section, but keep in mind that Pintura can be used in plain JS, jQuery, React, Vue, Angular, Svelte, and around 15 other frameworks. Adding Pintura to your project As mentioned a few times already, Pintura can be implemented in many frameworks, but to keep things simple I’m going to show you how to use the Pintura input field. Pintura input field is a tiny wrapper over the <input type=”file”> field. In other words, by using the Pintura input field, you will get a file upload button in HTML, but constrained to images and packed with a powerful set of options to process the image. Once you have your account and license ready, simply log in to the dashboard and download the package. Click on your license and download the latest release: Unpack the Pintura archive and you will get a folder structure like this: The locale folder contains translation files for various languages and is very useful if you need to use Pintura on a non-English project. The packages folder contains packages for embedding Pintura in various development stacks, and the presets folder is a collection of examples on how to use Pintura in 20 different frameworks: To locate the example we’re going to test, open the “pintura-input” folder: As you can see, this example also contains a “pintura-input” folder, which consists of one JS and one CSS file, that power the Pintura input field. We also have a favicon, one image for a test, and the index.html file that combines them all. The demonstration should start working as soon as you start the index.html file: What can we do with the Pintura input field? As mentioned above, the Pintura input field can be used for any of your image processing needs, either predefined or based on visitor input. Let’s say we have an LMS website where students can enroll in courses and get a certificate. Such LMS needs profile photos of students, shown in various sections of the website, and also in the certificate. To keep the design and layout consistent, we want each profile photo to be 256×256 pixels, but standard solutions do come with certain cons. You can force the students to do it themselves on their PC, and then upload the proper photo. Or use CSS to tweak photos on the fly or PHP to crop the photos as desired. But instead of forcing students to do external work and research for the best tool, having to deal with the distortion that CSS brings or weirdly cropped photos in PHP, you can just use Pintura. For this example,